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