jQuery lightGallery — эффектная галерея для сайта

jQuery lightGallery - эффектная галерея для сайта

От автора: Очень часто на сайте необходимо отображать различные изображения, к примеру фотографии или графические материалы. При этом очень хорошей практикой является использование галерей изображений, которые упрощают просмотр как миниатюр изображений, так и их увеличенных копий. В данном уроке мы с Вами рассмотрим очень эффектную галерею изображений под названием jQuery lightGallery.

автор

Автор: Виктор Гавриленко

Меня зовут Виктор Гавриленко, по образованию я инженер электромеханик. Еще учась в институте, начал увлекаться компьютерными технологиями и программированием, на протяжении двух лет усиленно занимаюсь разработкой интернет сайтов и веб-программированием. Увлекаюсь написанием небольших скриптов на языке PHP, в связке базами данных MySQL, SQLite, неплохо знаю такие движки как WordPress, Drupal, Joomla.

скачать исходникискачать урок

Установка галереи

Для начала переходим на официальный сайт http://sachinchoolur.github.io/lightGallery/ и скачиваем архив с галереей jQuery lightGalery:

Далее распакуем полученный архив, в папке light-gallery содержатся компоненты галереи, каждый из которых расположен в отдельной папке:

css – в данной директории содержатся стили, необходимые для правильной работы галереи;

fonts – не стандартные шрифты, используемые в галерее;

img – в данном каталоге, содержится анимационное gif изображение, которое отображается при загрузке изображений;

js – в данной директории, содержится библиотека, необходимая для работы галереи.

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

Далее, для работы галереи необходима библиотека jQuery, поэтому если она у Вас не подключена, скачайте ее с официального сайта http://jquery.com и подключите к Вашему сайту (у меня данная библиотека содержится в папке js, вместе с библиотекой галереи):

<script src="templates/js/jquery-1.11.2.min.js"></script>

Далее, подключаем библиотеку галереи:

<script src="templates/js/lightGallery.js"></script>

Также подключим пустой файл, script.js, в котором будем вести кодирование на языке javaScript:

<script src="templates/js/script.js"></script>

Затем подключим файл стилей галереи:

<link  rel="stylesheet" href="css/lightGallery.css"/>

На этом установка галереи завершена.

Отображение галереи на экране браузера

Для работы галереи необходимы изображения в двух форматах:

миниатюры – изображения небольшого размера (100 пикселей по ширине и высоте), которые используются для предварительного просмотра;

изображения полного размера – необходимые для детального просмотра.

Данные изображения я уже заготовил и скопировал в папку. Так же для работы галереи необходимо создать следующую разметку HTML:

<ul id="lightgalery" class="gallery">
	<li data-src="img/1.jpg" data-sub-html="<div class='test'><h1>Hello</h1><p>Text</p></div>">
		<a href="#">
			<img src="img/th/1_th.jpg">
		</a>		
	</li>

	<li data-src="img/2.jpg">
		<a href="#">
			<img src="img/th/2_th.jpg">
		</a>		
	</li>

	<li data-src="img/3.jpg" >
		<a href="#">
			<img src="img/th/3_th.jpg">
		</a>		
	</li>

	<li data-src="img/4.jpg">
		<a href="#">
			<img src="img/th/4_th.jpg">
		</a>		
	</li>
</ul>

Обратите внимание, что галерея представляет собой блок ul, в котором каждый тег li – это отдельное изображение галереи. Атрибут data-src – содержит путь к изображению полного размера. Соответственно тег img, каждого блока li — отображает миниатюру. Так же блок li может содержать атрибут data-sub-html, в котором можно описать произвольную строку, которая будет отображаться вместе с соответствующим изображением галереи. При этом данная строка может содержать теги HTML, таким образом можно формировать полноценные блоки и задавать для них стили. Более того, в атрибуте data-sub-html, можно указать идентификатор блока, который будет отображен с соответствующим изображением.
Так же давайте добавим несколько правил, для изображений галереи, что бы выровнять их горизонтально:

ul {
			list-style: none outside none;
		    padding-left: 0;
		}
		.gallery li {
			display: block;
			float: left;
			height: 100px;
			margin-bottom: 6px;
			margin-right: 6px;
			width: 100px;
		}
		.gallery li a {
			height: 100px;
			width: 100px;
		}
		.gallery li a img {
			max-width: 100px;
		}
		
		.test {
    background: none repeat scroll 0 0 #fff;
    left: 500px;
    position: absolute;
    top: 100px;
}

Теперь давайте посмотрим, что у нас получилось:

Теперь миниатюры изображений отображаются, но галерея в целом еще не работает. Поэтому открываем файл script.js и добавим следующий код:

jQuery(document).ready(function ($) {
	
	$("#lightgalery").lightGallery({
	});

});

То есть при помощи библиотеки jQuery, выбираем блок в котором будет располагаться галерея – это блок с идентификатором #lightgalery, и вызываем метод lightGallery. Теперь если обновить информацию в браузере и кликнуть по одному из изображений галереи мы увидим следующее:

Как Вы видите, галерея теперь вполне работоспособна.

Настройка галереи изображений

При вызове метода lightGallery(), можно указать следующие настройки (при этом каждую настройку я закомментировал), используя которые можно настроить под себя функционал галереи:

$("#lightgalery").lightGallery({
		//вид анимационного эффекта, при смене изображения
		mode:'fade',
		// скорость протекания анимационных эффектов
		speed:500,
		// класс который будет добавлен, к основному блоку галереи
		addClass:'myclass',
		// количество загруженных изображений в память
		//если установлено значение 2, то следующие два и предыдущие два изображения
		// относительно текущего (открытого в галереи), будут загружены в память
		preload:2,
		//селектор дочерних элементов, блока с галереей.
		// Напомню, что каждый дочерний элемент - это отдельное изображение. 
		//Используя данную настройку, можно создать собственную разметку слайдера
		selector:'p'
		//Если FALSE, то кнопка показа миниатюр показана не будет
		thumbnail:true,
		//Показывать или нет сразу же миниатюры изображений
		showThumbByDefault:true
		//ширина миниатюр
		thumbWidth:100,
		//внешний отступ между миниатюрами
		thumbMargin:50
		//Если TRUE, значит перейдя к последнему изображению - мы вернемся к первому и т.д 
		loop:true,
		//  Если TRUE, будет включен режим автоматического проигрывания слайдшоу
		auto:true,
		//Пауза между слайдами
		pause:5000,
		//Если TRUE, выйти из просмотра изображения можно клавишей ESK
		eskKey:false,
		//Если TRUE, клик по свободной области галереи ,приведет к ее закрытию
		closable:false,
		//Если TRUE, будет отображен счетчик изображений галереи.
		counter:true
	});

Динамическое добавление изображений

Изображения в галерею, можно добавлять динамически, используя только код JavaScript, поэтому давайте посмотрим, как это делается. Первым делом, всю разметку галереи, я заменяю на обычный простой абзац <p>

<p class="but">Click</p>

Теперь напишем небольшой скрипт – обработчик события click, по данному блоку.

$(".but").click(function () {
		$(this).lightGallery({
			dynamic:true,
			dynamicEl:[
			
			{'src':'img/1.jpg','thumb':'img/th/1_th.jpg','sub-html':"<div class='test'><h1>Hello</h1><p>Text</p></div>"},
			{'src':'img/2.jpg','thumb':'img/th/2_th.jpg'},
			{'src':'img/3.jpg','thumb':'img/th/3_th.jpg'},
			{'src':'img/4.jpg','thumb':'img/th/4_th.jpg'},
			]
		});
	});

То есть при клике по блоку

, будет вызван метод lightGallery(), для данного блока, при этом изображения в галерею будут добавлены автоматически, исходя из значений массива, передаваемого в настройку dynamicEl. Каждая ячейка данного массива – это отдельный объект, у которого есть собственные свойства:

src- путь к полноразмерному изображению;

thumb – путь к миниатюре;

sub-html – описание изображения, это может быть кК обычный текст, так и текст содержащий html теги.

Так же, при динамическом добавлении изображений в галерею, необходимо активировать настройку dynamic, то есть передать ей значение TRUE.

На этом данный урок завершен. Всего Вам доброго и удачного кодирования!!!

Хотите научиться делать фотогалереи как Вконтакте?

Прямо сейчас изучите курс по созданию красивой фотогалареи как Вконтакте!

Смотреть курс

Метки: ,

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (7)

  1. Iryna

    Виктор, благодарю за знакомство с данным плагином. Забираю себе на сайт.
    Хороший урок, спасибо.

  2. Ольга

    добрый день, подскажите а lightSlider по такому же принципу установка? или есть какие-то особенности?

    • Андрей Кудлай

      Добрый день, Ольга. Принцип работы со всеми подобными плагинами — один и тот же. Есть, конечно, нюансы, но суть одинакова. Ну и порядок установки всегда можно найти на официальном сайте плагина.

  3. Ольга

    что-то совсем я запуталась, не получается слайдер поставить,
    подскажите может у вас есть урок по установке lightslider
    http://sachinchoolur.github.io/lightslider/ я вот здесь смотрела,
    с галереей разобралась по вашему уроку,) поставила, но слайдер мне актуальнее, но вот с ним не получается разобраться

    • Андрей Кудлай

      Насколько я помню, такого урока нет. Задайте вопрос на нашем форуме, покажите, что именно у Вас не получается, выложите архив с кодом или дайте ссылку на него и, думаю, Вам помогут на форуме.

  4. Вал

    Приветствую! Подскажите, как настроить две и более динамически подгружаемых галереи на одной странице. Пробовал использовать разные galleryId. Первая галерея открывается нормально, но что бы открыть вторую нужен двойной клик. При одиночном галерея открывается и сразу закрывается. Плагин hash подключен.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree