Великолепная галерея с помощью jQuery

admin — Fri, 17 Jul 2009 14:33:42 +0000

В этой статье я покажу вам как с помощью библиотеки jQuery без лишних телодвижений можно сделать отличную галерею. Для её создания мы будем использовать замечательный плагин GalleryView. Чем же хорош этот плагин? Дело в том, что он обладает нужным функционалом, при очень простой установке на веб-страницу. Кроме того, эта jquery галерея отлично интегрируется с CMS.

А также этот плагин поддерживает темы, причем в архив уже включены 2 стандартные темы: для светлого и тёмного дизайна. GalleryView требует jQuery Timers и jQuery Easing.
Посмотреть пример Cкачать GalleryView

Автор плагина – Джек Андерсон
Cайт плагина

Простой пример

Для начала подключим нужные файлы jquery галереи:

 type="text/css" rel="stylesheet" href="galleryview.css" /> 
 type="text/javascript" src="jquery-1.3.2.min.js">> 
 type="text/javascript" src="jquery.easing.1.3.js">> 
 type="text/javascript" src="jquery-galleryview-1.1/jquery.galleryview-1.1.js">> 
 type="text/javascript" src="jquery-galleryview-1.1/jquery.timers-1.1.2.js">>

Затем зададим параметры галереи:

$('#photos').galleryView({
	panel_width: 800,
	panel_height: 300,
	frame_width: 100,
	frame_height: 100,
});

Все другие параметры не обязательны. С ними вы можете поэкспериментировать самостоятельно.

Задаём слой, в котором будет отображаться jquery галерея.

 id="photos" class="galleryview">
	...
>

Внутри него размещаем несколько div’ов. По одному на фотографию. Структура такого вида:

...
 class="panel">
	 src="URL фотографии" />
	 class="panel-overlay">
		>Название фотографии>
		>
                  Описание фотографии
		>
	>
>
...

Сразу после нескольких таких div’ов, не закрывая главный слой (id=”photos”), вставляем список вида:

 class="filmstrip">
	> src="img/gallery/frame-01.jpg" alt="Effet du soleil" title="Effet du soleil" />>
	> src="img/gallery/frame-02.jpg" alt="Eden" title="Eden" />>
	> src="img/gallery/frame-03.jpg" alt="Snail on the Corn" title="Snail on the Corn" />>
	> src="img/gallery/frame-04.jpg" alt="Flowers" title="Flowers" />>
	> src="img/gallery/frame-06.jpg" alt="Alone Beach" title="Alone Beach" />>
	> src="img/gallery/frame-05.jpg" alt="Sunrise Trees" title="Sunrise Trees" />>
	> src="img/gallery/frame-07.jpg" alt="Waterfall" title="Waterfall" />>
	> src="img/gallery/frame-08.jpg" alt="Death Valley" title="Death Valley" />>
>

Список состоит из уменьшенных изображений соответствующих фотографий.
Вот и всё! Если всё сделать правильно, должна получиться примерно вот такая галерея.

Темы

Повторюсь, в комплекте плагина включены 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, то анимация останавливается когда указатель наведён на панель.

Посмотреть пример Cкачать GalleryView

WebDuty » галерея

Великолепная галерея с помощью jQuery

Простой пример

Темы

Полный список параметров