|
|
|
|
Создаем галерею изображений с эффектом слайд шоу используя библиотеку jQuery Автор: Андрей Краснокутский Дата: 2011-11-22 Как создать галерею изображений используя JavaScript.Сегодня мы научимся создавать галерею изображений, с помощью библиотеки jQuery, а точнее одну из галерей. Библиотека jQuery просто огромна и содержит в себе великое множество скриптов JavaScript с различными эффектами и множество разных галерей изображений. Живой пример работы галереи изображений (скрипт gallery.js) Вы видите ниже. Здесь содержится 10 различных фотографий, но фотографий можно сделать любое количество, это на Ваше усмотрение. Я использовал фотографии своего родного города Смоленска. Итак, смотрим работу галереи изображений:
Как видите внизу идет ряд миниатюр, а выше выводится большое изображение выбранной миниатюры. Кроме того есть функция просмотра в режиме слайд шоу. Для этого Вы можете воспользоваться кнопками Start и Stop. После запуска слайд шоу активируется отображение отсчета времени смены изображений. Я установил 4 секунды, но Вы можете установить любое время смены изображений в своих сайд шоу. Слева отображается порядок смены фотографий (общее количество и порядковый номер на данный момент). Как в основном окне, так и в панели миниатюр имеются кнопки для перелистывания фотографий. Кроме того, управлять перелистыванием можно и с клавиатуры компьютера, используя кнопки перемещения Влево или Вправо. Запустить или остановить слайд шоу можно с помощью кнопки S на клавиатуре. Для установки галереи потребуется подгрузка плагинов jQuery. Для этого скачайте архив. В архиве есть пример работы библиотеки файл: index.html, если что то не поймете в этом уроке, Вы всегда можете посмотреть исходный код работы скрипта. Итак, распаковываем скачанный архив. Считаем, что все файлы у Вас лежат в корневой папке, хотя положить все файлы Вы можете в любую папку сайта, но при этом не забудьте прописать правильный путь до этих файлов. Файлы: jquery-1.6.2.min.js, gallery.js, gallery.css - это соответственно библиотека jQuery, плагин галереи и таблица стилей оформления. Эти файлы положите в корневую папку Вашего сайта. Так же в корневую папку положите все файлы картинок из архива. Файлы фотографий у Вас конечно же будут свои. Между тегами <head> и </head> прописываем код Листинга 1. Листинг 1.
Это стандартное подключение скриптов и каскадных таблиц стилей CSS, одновременно здесь же мы активируем функцию запуска галереи изображений. Для вывода галереи на web-странице (между тегами <body> и </body>), в нужном месте вставляем код Листинга 2. Листинг 2.
Здесь сначала идет обычный стиль оформления блока вывода галереи, а затем перечисление всех фотографий используемых в слайд шоу. Для уменьшения размера кода в Листинге 2 показаны только 3 первые фотографии. Как видите перечисление идет обычным ненумерованным списком. Нумерация начинается с нуля: class="image0" Добавление дополнительных фотографий и миниатюр происходит простым добавлением блока заключенного в теги <li> </li>: <li> в код Листинга 2. Соответственно с изменением названия новых файлов: <a href="dnepr.jpg">(полноразмерное изображение) и img src="dnepr_mini.jpg"(миниатюра) и последующей нумерацией: class="image0".
Примечание: все миниатюры изображений должны быть одной высоты и желательно одной ширины, а «большие» изображения не должны превышать размеры основного окна web-страницы. Дополнительную настройку работы галереи можно произвести в коде плагина (файл gallery.js). Здесь нам доступны следующие настройки:
Все мне нравится в работе этого плагина и галереии избражений, но есть один неприятный минус. Вы заметили, что надписи Start, Stop, sek, Foto выполнены по английски. Если Ваш сайт использует кодировку charset=UTF-8, то Вы можете прописать эти надписи по русски (написать Старт, Стоп, сек. ФОТО). Делается это в файле gallery.js. Но если на Вашем сайте использована кодировка charset=windows-1251 (как у меня), то лучше перестраховаться и написать все эти слова английскими символами, иначе иногда могут возникнуть ошибки в виде "кракозябр", что согласитесь не очень красиво. Вот собственно говоря и все. Как видите все довольно просто и работает во всех распространенных браузерах. Всего Вам доброго.
Читайте так же другие наши материалы. Как изменить DNS сервера у Домена? Как создать реально работающую модель бизнеса? Почтовая Рассылка - Главный инструмент Интернет-Бизнесмена. Создание. Управление Продвижение. Приближение и отдаление изображений с помощью jQuery. Как практически зарегистрировать Доменное Имя.
Просмотров: 24873 Поделитесь этой информацией со своими друзьями! Комментарии к этой статье (уроку): Комментарии добавил(а): Олег Гузь, Андрей, спасибо за новый JavaScript. Скажи, пожалуйста, а нельзя ли сделать слайд-шоу исключительно из больших фото, убрав всё остальное: мини-фото и сопровождающие надписи стар-стоп и т.д.? Хотелось бы запустить слайд-шоу, в котором фото автономно и медленно меняются. Если это возможно, то может на каком-нибудь занятии продемонстрируешь это? Заранее спасибо! С уважением, Олег Комментарии добавил(а): Дмитрий ссылки "архив" и "архив с исходником не работают" Комментарии добавил(а): Евгений Хотел скачать архив, выдает какую-то ошибку. Комментарии добавил(а): Галина Да,действительно,не работает. Комментарии добавил(а): АндрейК Прошу прощения, произошел не большой сбой при закачке, в результате архив с исходниками был поврежден. В настоящее время все исправил. Все работает, скачивайте и пользуйтесь на здоровье :) Комментарии добавил(а): Инна Очень красивые фотографии и полезная программа. Большое СПАСИБО, Андрей ! Комментарии добавил(а): Лариса Спасибо, Андрей, урок замечательный! Все понятно. Комментарии добавил(а): АндрейК Олег, один из вариантов такого сайд шоу мы рассматривали здесь: http://www.luksweb.ru/view_post.php?id=284 Комментарии добавил(а): Дина Спасибо за урок. У меня установлен Гугл Хром. Ваш Popup спрятался за большой снимок.И его почти не видно. Комментарии добавил(а): Вячеслав Андрей, спасибо за очередной урок! Просветите, пожалуйста, какой параметр в коде плагина (файл gallery.js) отвечает за прозрачность страницы, на которой размещаем галерею. Комментарии добавил(а): Спасибо вам огромнейшее я очень-очень долго и Спасибо вам огромнейшее за проделаную работу! А я уже было впал в отчаяние, что не сделать мне такого у себя на сайте)))))))) Комментарии добавил(а): sid Подскажите как убрать полоску с описанием картинки? Комментарии добавил(а): sid методом тыка за комментировал строчку в ксс .ad-gallery .ad-image-wrapper .ad-image .ad-image-description вроде помогло описание исчезло, просто если не добавлять в тэге img описание к картинке то она вообще не отображалась Комментарии добавил(а): АндрейК SID! Очень странно... если Вы не допустили ошибок в коде Листингов 1 и 2, то все работает без всяких комментариев строк. Не знавши всех Ваших действий - подробнее сказать не могу в чем у Вас проблема Комментарии добавил(а): sid Спасибо что ответили. Ну собственно и проблемы то особой не было. Мне просто хотелось чтобы на большом фото не было его описания. например как у ВАС на одном из фото "Днепр Набережная реки Днепр" хотелось чтобы этого текста не было, или он был не на фото или сворачивался и его можно было бы вызвать при необходимости Комментарии добавил(а): Светлана Здравствуйте! Вы знаете что то я не все поняла. Корневая папка это wp-contene? А в этой папке я положила в папку gallery,всю информацию,что скачала с вашего сайта. Где и как прописать путь для файла? И еще вопрос ,куда надо вставить Листинг 1. и Листинг 2 Помогите пожалуйста. Комментарии добавил(а): ksevica Здравствуйте. У меня полноразмерное изображение открывается в новом окне (окошко над миниатюрами остается пустым). Путь к файлам прописан правильно. Подскажите пожалуйста, в чем может быть причина? Комментарии добавил(а): Владимир Спасибо больше за приведенный код и комментарии. Все заработало. Комментарии добавил(а): Геннадий. Андрей здравствуйте. Все работает но где кирилица, выдает: "Набережная реки Днепр." Пробовал разные кодировки, не помогает. В чем причина? Комментарии добавил(а): Оксана А можно сделать чтобы миниатюры справа, а не внизу были? спс Комментарии добавил(а): Алла помоите, пожалуйста! ничего у меня не получается( http://avtcrtd.ucoz.ru/index/sjurpriz/0-72 мой ящик pochta125@inbox.ru Комментарии добавил(а): Алла как поменять цвет (зеленый на фиолетовый например) Комментарии добавил(а): Евгений Для использования русских надписей для Start/Stop, sec можно попробовать применить картинки например с этими надписями на русском и использловать их как ссылки, заключить в тег <a> Комментарии добавил(а): Евгений Отличная галерея. Встала отлично, все параметры можно редактировать под собственный сайт Комментарии добавил(а): АндрейК Здравствуйте Сергей! Вероятнее всего, Вам нужно правильно прописать пути для ссылок, скриптов и картинок Комментарии добавил(а): Сергей (mal_250s@mail.ru) когда вставляю код на главной странице все работает, а когда на пустой страничке из меню то не работает. Подскажите как исправить?! Добавить Ваш комментарий: |
Новости сайта Домены 
Google Adsense |
Навигация
Видео Курсы
Последние заметки
Новости сайта
Архив 2016 год: 2015 год: 2014 год: 2013 год: 2012 год: 2011 год: 2010 год: 2009 год: 2008 год: Сайты друзей Наши ссылки
Если Вам понравился  Наши Аттестаты
|
|
Разрешается полное или частичное копирование материалов сайта с обязательным |