Создаем галерею изображений с эффектом слайд шоу используя библиотеку 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.
Здесь сначала идет обычный стиль оформления блока вывода галереи, а затем перечисление всех фотографий используемых в слайд шоу. Для уменьшения размера кода в Листинге 2 показаны только 3 первые фотографии. Как видите перечисление идет обычным ненумерованным списком. Нумерация начинается с нуля: class="image0"
Добавление дополнительных фотографий и миниатюр происходит простым добавлением блока заключенного в теги <li> </li>:
в код Листинга 2. Соответственно с изменением названия новых файлов: <a href="dnepr.jpg">(полноразмерное изображение) и img src="dnepr_mini.jpg"(миниатюра) и последующей нумерацией: class="image0".
Примечание: все миниатюры изображений должны быть одной высоты и желательно одной ширины, а «большие» изображения не должны превышать размеры основного окна web-страницы.
Дополнительную настройку работы галереи можно произвести в коде плагина (файл gallery.js). Здесь нам доступны следующие настройки:
в 13-ой строке «start_at_index:» указывается с какого изображения начинать просмотр, по умолчанию 0, индекс указывается в файле index.html в значении атрибута class тега img;
в 14-ой строке «thumb_opacity:» указывается прозрачность неактивных миниатюр, значения от 0 до 1;
в 16-ой строке «animation_speed:» указывается скорость смены изображений одно на другое (в миллисекундах);
в 26-ой строке «speed:» указывается время таймера смены изображений в режиме слайд шоу (в миллисекундах);
в 33-ей строке «effect:» указывается стиль смены изображений, slide-vert — снизу вверх, fade — медленно исчезает, resize — изменяется в размере, none — сменяется без эффекта, false — запрещает смену изображения;
в 34-ой строке «enable_keyboard_move:» указывается реагировать на команды с клавиатуры или нет, true — да, false — нет.
Все мне нравится в работе этого плагина и галереии избражений, но есть один неприятный минус. Вы заметили, что надписи Start, Stop, sek, Foto выполнены по английски. Если Ваш сайт использует кодировку charset=UTF-8, то Вы можете прописать эти надписи по русски (написать Старт, Стоп, сек.ФОТО). Делается это в файле gallery.js.
Но если на Вашем сайте использована кодировка charset=windows-1251 (как у меня), то лучше перестраховаться и написать все эти слова английскими символами, иначе иногда могут возникнуть ошибки в виде "кракозябр", что согласитесь не очень красиво.
Вот собственно говоря и все. Как видите все довольно просто и работает во всех распространенных браузерах.
Комментарии добавил(а): Олег Гузь, Дата: 2011-11-23
Андрей, спасибо за новый JavaScript. Скажи, пожалуйста, а нельзя ли сделать слайд-шоу исключительно из больших фото, убрав всё остальное: мини-фото и сопровождающие надписи стар-стоп и т.д.? Хотелось бы запустить слайд-шоу, в котором фото автономно и медленно меняются. Если это возможно, то может на каком-нибудь занятии продемонстрируешь это? Заранее спасибо! С уважением, Олег
Комментарии добавил(а): Дмитрий Дата: 2011-11-23
ссылки "архив" и "архив с исходником не работают"
Комментарии добавил(а): Евгений Дата: 2011-11-23
Хотел скачать архив, выдает какую-то ошибку.
Комментарии добавил(а): Галина Дата: 2011-11-23
Да,действительно,не работает.
Комментарии добавил(а): АндрейК Дата: 2011-11-23
Прошу прощения, произошел не большой сбой при закачке, в результате архив с исходниками был поврежден. В настоящее время все исправил. Все работает, скачивайте и пользуйтесь на здоровье :)
Комментарии добавил(а): Инна Дата: 2011-11-23
Очень красивые фотографии и полезная программа. Большое СПАСИБО, Андрей !
Комментарии добавил(а): Лариса Дата: 2011-11-24
Спасибо, Андрей, урок замечательный! Все понятно.
Комментарии добавил(а): АндрейК Дата: 2011-11-24
Олег, один из вариантов такого сайд шоу мы рассматривали здесь: http://www.luksweb.ru/view_post.php?id=284
Комментарии добавил(а): Дина Дата: 2011-11-24
Спасибо за урок. У меня установлен Гугл Хром. Ваш Popup спрятался за большой снимок.И его почти не видно.
Комментарии добавил(а): Вячеслав Дата: 2011-11-28
Андрей, спасибо за очередной урок!
Просветите, пожалуйста, какой параметр в коде плагина (файл gallery.js) отвечает за прозрачность страницы, на которой размещаем галерею.
Комментарии добавил(а): Спасибо вам огромнейшее я очень-очень долго и Дата: 2011-12-04
Спасибо вам огромнейшее за проделаную работу! А я уже было впал в отчаяние, что не сделать мне такого у себя на сайте))))))))
Комментарии добавил(а): sid Дата: 2012-01-19
Подскажите как убрать полоску с описанием картинки?
Комментарии добавил(а): sid Дата: 2012-01-19
методом тыка за комментировал строчку в ксс
.ad-gallery .ad-image-wrapper .ad-image .ad-image-description
вроде помогло описание исчезло, просто если не добавлять в тэге img описание к картинке то она вообще не отображалась
Комментарии добавил(а): АндрейК Дата: 2012-01-19
SID! Очень странно... если Вы не допустили ошибок в коде Листингов 1 и 2, то все работает без всяких комментариев строк. Не знавши всех Ваших действий - подробнее сказать не могу в чем у Вас проблема
Комментарии добавил(а): sid Дата: 2012-01-24
Спасибо что ответили. Ну собственно и проблемы то особой не было.
Мне просто хотелось чтобы на большом фото не было его описания.
например как у ВАС на одном из фото
"Днепр
Набережная реки Днепр"
хотелось чтобы этого текста не было, или он был не на фото или сворачивался и его можно было бы вызвать при необходимости
Комментарии добавил(а): Светлана Дата: 2012-02-29
Здравствуйте!
Вы знаете что то я не все поняла.
Корневая папка это wp-contene?
А в этой папке я положила в папку gallery,всю информацию,что скачала с вашего сайта.
Где и как прописать путь для файла?
И еще вопрос ,куда надо вставить Листинг 1. и Листинг 2
Помогите пожалуйста.
Комментарии добавил(а): ksevica Дата: 2012-08-07
Здравствуйте. У меня полноразмерное изображение открывается в новом окне (окошко над миниатюрами остается пустым). Путь к файлам прописан правильно. Подскажите пожалуйста, в чем может быть причина?
Комментарии добавил(а): Владимир Дата: 2012-10-17
Спасибо больше за приведенный код и комментарии. Все заработало.
Андрей здравствуйте. Все работает но где кирилица, выдает:
"Набережная реки Днепр."
Пробовал разные кодировки, не помогает. В чем причина?
Комментарии добавил(а): Оксана Дата: 2012-12-05
А можно сделать чтобы миниатюры справа, а не внизу были? спс
Комментарии добавил(а): Алла Дата: 2013-02-22
помоите, пожалуйста! ничего у меня не получается( http://avtcrtd.ucoz.ru/index/sjurpriz/0-72
мой ящик pochta125@inbox.ru
Комментарии добавил(а): Алла Дата: 2013-02-23
как поменять цвет (зеленый на фиолетовый например)
Комментарии добавил(а): Евгений Дата: 2014-02-25
Для использования русских надписей для Start/Stop, sec можно попробовать применить картинки например с этими надписями на русском и использловать их как ссылки, заключить в тег <a>
Комментарии добавил(а): Евгений Дата: 2014-02-26
Отличная галерея. Встала отлично, все параметры можно редактировать под собственный сайт
Комментарии добавил(а): АндрейК Дата: 2016-06-19
Здравствуйте Сергей! Вероятнее всего, Вам нужно правильно прописать пути для ссылок, скриптов и картинок
Комментарии добавил(а): Сергей (mal_250s@mail.ru) Дата: 2016-06-19
когда вставляю код на главной странице все работает, а когда на пустой страничке из меню то не работает. Подскажите как исправить?!