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

15 марта 2016 Антон Кулешов 1954 0

Приветствую друзья, я уже давно нечего не добавлял по теме «увеличение картинок» или, как принято называть эффект - 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() – этот метод срабатывает при неудачной загрузке изображения.

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

Реклама
Комментариев еще не оставлено
no_avatar
Читайте далее

И еще 30 CSS эффектов при наведении

5 ноября 2015 Антон Кулешов

Здравствуйте дорогие читатели! Наступило время пополнить коллекцию сайта ещё 30-тью красивыми CSS эффектами при наведении курсора на изображение. Данная тема поистине очень обширна и мы не устаем пополнять нашу библиотеку все новыми и новыми эффектами.

«Дюжина» ховер эффектов в одном флаконе

21 февраля 2015 Антон Кулешов

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

Добавляем динамические тени CSS при помощи плагина JavaScript

20 декабря 2014 Антон Кулешов

Сегодня в статье мы рассмотрим JavaScript библиотеку - shine. При её помощи вы сможете добавить к себе на сайт красивые и привлекающие внимание динамические тени (CSS при этом не надо будет прописывать вручную).