Великолепная галерея с помощью jQuery
Статья от 17.07.09 в категории jQuery, Новости
В этой статье я покажу вам как с помощью библиотеки jQuery без лишних телодвижений можно сделать отличную галерею. Для её создания мы будем использовать замечательный плагин . Чем же хорош этот плагин? Дело в том, что он обладает нужным функционалом, при очень простой установке на веб-страницу. Кроме того, эта jquery галерея отлично интегрируется с CMS.
А также этот плагин поддерживает темы, причем в архив уже включены 2 стандартные темы: для светлого и тёмного дизайна. GalleryView требует и .
Автор плагина – Джек Андерсон
Простой пример
Для начала подключим нужные файлы jquery галереи:
<link type="text/css" rel="stylesheet" href="galleryview.css" /> <script type="text/javascript" src="jquery-1.3.2.min.js"></script> <script type="text/javascript" src="jquery.easing.1.3.js"></script> <script type="text/javascript" src="jquery-galleryview-1.1/jquery.galleryview-1.1.js"></script> <script type="text/javascript" src="jquery-galleryview-1.1/jquery.timers-1.1.2.js"></script>
Затем зададим параметры галереи:
$('#photos').galleryView({ panel_width: 800, panel_height: 300, frame_width: 100, frame_height: 100, });
Все другие параметры не обязательны. С ними вы можете поэкспериментировать самостоятельно.
Задаём слой, в котором будет отображаться jquery галерея.
<div id="photos" class="galleryview"> ... </div>
Внутри него размещаем несколько div’ов. По одному на фотографию. Структура такого вида:
... <div class="panel"> <img src="URL фотографии" /> <div class="panel-overlay"> <h2>Название фотографии</h2> <p> Описание фотографии </p> </div> </div> ...
Сразу после нескольких таких div’ов, не закрывая главный слой (id=”photos”), вставляем список вида:
<ul class="filmstrip"> <li><img src="img/gallery/frame-01.jpg" alt="Effet du soleil" title="Effet du soleil" /></li> <li><img src="img/gallery/frame-02.jpg" alt="Eden" title="Eden" /></li> <li><img src="img/gallery/frame-03.jpg" alt="Snail on the Corn" title="Snail on the Corn" /></li> <li><img src="img/gallery/frame-04.jpg" alt="Flowers" title="Flowers" /></li> <li><img src="img/gallery/frame-06.jpg" alt="Alone Beach" title="Alone Beach" /></li> <li><img src="img/gallery/frame-05.jpg" alt="Sunrise Trees" title="Sunrise Trees" /></li> <li><img src="img/gallery/frame-07.jpg" alt="Waterfall" title="Waterfall" /></li> <li><img src="img/gallery/frame-08.jpg" alt="Death Valley" title="Death Valley" /></li> </ul>
Список состоит из уменьшенных изображений соответствующих фотографий.
Вот и всё! Если всё сделать правильно, должна получиться примерно вот такая .
Темы
Повторюсь, в комплекте плагина включены 2 стандартные темы. Но вы можете создавать и свои собственные. Тема состоит из шести изображений в формате PNG.
Просто создайте изображения с соответствующими именами файлов и размерами:
- pointer.png and pointer-down.png – 19 x 10
- next.png – 22 x 22
- prev.png – 22 x 22
- panel-nav-next.png and panel-nav-prev.png – 42 x 42
Создайте папку в папке themes, обзовите её как-нибудь и скопируйте ваши файлы в неё. Затем в настройках вашей галереи установите в параметре nav_theme название вашей папки.
Полный список параметров
| Параметр | Тип значения | По умолчанию | Описание |
|---|---|---|---|
| panel_width | integer (pixels) | 400 | Ширина галереи |
| panel_height | integer (pixels) | 300 | Высота галереи |
| frame_width | integer (pixels) | 80 | Ширина уменьшенной фотографии |
| frame_height | integer (pixels) | 80 | Высота уменьшенной фотографии |
| overlay_height | integer (pixels) | 70 | Высота панели описания |
| overlay_font_size | any font size value (px,em,pt,%) | ‘1em’ | Размер шрифта в описании |
| overlay_position | ‘top’ | ‘bottom’ | ‘bottom’ | Расположение панели описания |
| filmstrip_position | ‘top’ | ‘bottom’ | ‘bottom’ | Расположение панели с уменьшенными изображениями фотографий |
| transition_speed | jQuery time value (200,’slow’,etc) | 400 | Скорость анимации |
| transition_interval | jQuery time value (200,’slow’,etc) | 6000 | Интервал между сменой фотографий (0 = без автоматической смены) |
| overlay_opacity | float 0.0 – 1.0 | 0.6 | Прозрачность панели описания |
| overlay_color | jQuery color value (rgb,hex,name) | ‘black’ | Цвет фона панели описания |
| background_color | jQuery color value (rgb,hex,name) | ‘black’ | Цвет фона галереи |
| overlay_text_color | jQuery color value (rgb,hex,name) | ‘white’ | Цвет текста панели описания |
| caption_text_color | jQuery color value (rgb,hex,name) | ‘white’ | Цвет текста названий фотографий в предпросмотре |
| border | css value (e.g. ‘3px dotted #343434′) | ‘1px solid black’ | Ширина, стиль и цвет рамки галереи |
| nav_theme | (’light’ | ‘dark’) | ‘light’ | Цвет кнопок навигации |
| easing | jQuery easing value (’linear’,’swing’,etc) | ’swing’ | Тип анимации |
| show_captions | boolean | false | Определяет, отображать или нет подписи к фотографиям |
| fade_panels | boolean | true | Определяет, исчезать панели во время переходов или переключаться моментально. |
| pause_on_hover | boolean | false | Если true, то анимация останавливается когда указатель наведён на панель. |
19/07/09 в 19:22
Очень прикольная галерея!
Есть только два минуса:
1) Дурацкий оверлей поверх увеличенной фотографии не дает рассмотреть ее полностью. Гораздо интереснее было бы сделать просто темную полоску и на ней написать название фото и короткий комментарий в 2 строки;
2) По щелчку по увеличенной фотографии хочется увидеть лайтбокс с увеличенным вариантом, по нему щелкаем — увеличенный вариант закрывается
19/07/09 в 23:07
Прикольно! Спасибо за пример! ;-)
20/07/09 в 11:19
Можно использовать overlay_height. Он задаёт высоту оверлея. В том числе можно поставить высоту в 0px.
17/09/09 в 7:42
А куда нужно папку themes класть?
17/09/09 в 12:43
Папка themes должна лежать там же где и js файлы.
16/10/09 в 23:46
Как вставить это в WP?
18/10/09 в 17:26
Хорошие объяснения. Спасибо.
26/11/09 в 1:57
А тумбы можно ставить со ссылками на полные изображения ?
04/12/09 в 0:46
галерея отличная действительно! Но…. Вы показываете одно, а для скачивания предоставляете другое, а именно: не совсем те файлы не совсем в своих местах и если скачать то,что вы даете работать конечно не будет. Но во всяком случае спасибо. Скачала все файлы посмотрев по исходному коду и все заработало!!!
04/12/09 в 15:34
Подскажите пожалуйста, можно ли данную галерею поместить на одну страничку несколько раз, при этом галереи будут содержать разные картинки и разные панели управления??? если нет, не подскажите пожалуйста плагин который способен выполнить подобную задачу!!!!
25/01/10 в 1:24
Очень понравилась галерея!
Но не могу ее заставить работать в MODx 1.0.2.
Проблемка с скриптами – не работают.
Может подскажите как и что…
Спасибо!
27/01/10 в 12:58
А не знаете, как можно избавится от белой границы вокруг выбранной картинки в миниатюрах?
26/02/10 в 9:11
Товарищи, когда задаётся столько вопросов, значит вы не понимаете с чем имеете дело, для начала читается мануал по инструменту, затем ищется инфа в инете, а затем если не находится она, задаётся вопрос на тематическом форуме.
27/02/10 в 5:11
Так, раз фото то значит панорамы?
Ничего подобного почему в примере только панорманые?
Мне обычно фотографы горорят если фотография горизонтакльная то она должна быть горизонтальная, сделайти милость воткните в панормама еще и фотки у которых высота больше чем длина.
04/03/10 в 21:02
Ребята, кто-то нашел решение как можно на одной странице разместить несколько экземпляров этой чудной галлереи?
Спасибо!
05/04/10 в 11:22
Столкнулся с такой задачей: необходимо, чтобы в блоке panel отображалась не первая фотография блока filmstrip, а третья. Это необходимо для того, чтобы пользователь видил не только фотографии, которые ему предстоит посмотреть, но и фотографии, которые он уже посмотрел. Как реализовать такое – не знаю. Помогите пожалуйста.
22/04/10 в 9:23
а как сделать чтобы превью было ни шесть а пять , и текущая превью была ни первой а всегда по середине, и текущая выделялась просто красной рамкой, ответьте, пожалуйста, очень надо!?
13/10/10 в 0:46
Такая проблема: в ie открываю, появляется просмоторщик и тут же исчезает, потом через какое-то вермя появляется (всегда по разному, на localhost)
В чем может быть проблема?