Показать Меню
falbar Оригинальный lightbox

Оригинальный lightbox на jQuery

Оригинальный lightbox

Приветствую друзья, я уже давно нечего не добавлял по теме «увеличение картинок» или, как принято называть эффект - lightbox. Решений сейчас в интернете можно найти просто массу, и каждое по-своему применимо, так как они были написаны для конкретных задач. Сегодня я же хочу выделить один jQuery плагин из общей массы, названный simplezoom. Перевод названия, которого – простое увеличение, что соответствует самому скрипту.

Если Вы уже изучили пример, прикреплённый к статье, то могли заметить, что при клике на картинку не происходит затемнение. Задний фон полностью заливается одним цветом, таким образам акцентируя внимание пользователя только на изображение. Как по мне - это хороший вариант для использования на блогах или продающих страницах. При прокрутке всё возвращается на свои места – данную опцию можно отключить. Так же интуитивно понятный курсор не дает посетителю впасть в ступор при поиске кнопки закрытия режима просмотра увеличенной версии картинки.

Итак, давайте подключим скрипты и разберемся, как добавить к себе на сайт lightbox simplezoom:

<link href="css/simplezoom.css" type="text/css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/simplezoom.min.js" type="text/javascript"></script>

Далее надо вызвать, новый метод simplezoom(), делать мы это будем после загрузки страницы:

$(function(){

	$("a[rel=simplezoom]").simplezoom();
});

Теперь что касается HTML разметки:

<a href="путь_до_большой_картинки" rel="simplezoom">
	<img src="путь_до_миниатюры" alt="img" />
</a>

Принцип как видите, очень прост: в адресе ссылки мы помещаем изображение, которое нужно открыть в режиме lightbox, а в значение атрибута src элемента img путь до миниатюры. Так же к ссылке нужно не забыть прописать rel=simplezoom, вот и всё.

У плагина есть ряд своих настроек, которые мы рассмотрим ниже (в скобках я буду указывать значения по умолчанию):

  • classie – это свойство отвечает за дополнительный класс добавляемый к обертке lightbox ("");
  • offset – здесь можно указать минимальное расстояния от изображения до границ экрана браузера (40);
  • scrollclose – включение/отключение режима закрытия lightbox при прокрутке (true);
  • imgclass – тут указывается элемент, в котором плагин будет искать путь до изображения ("img");
  • duration – скорость анимации;
  • modalTmpl – в этом свойстве можно указать собственный HTML шаблон для вывода картинки в режиме lightbox;
  • loaderTmpl – тут указывается HTML лоудера;
  • onModalInit() – метод, который срабатывает если пользователь нажимает на изображение;
  • onModalClosed() – метод, срабатывающий при закрытии lightbox;
  • onImageLoaded() – метод срабатывает при успешном открытии большой версии изображения;
  • onImageError() – этот метод срабатывает при неудачной загрузке изображения.

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

Источник
github.com

Подписаться на обновления

Комментариев еще не оставлено