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

15 марта 2016 Антон Кулешов 1946 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
Читайте далее

Кликджекинг как соцфишинг, пишем скрипт для получения id пользователя вконтакте

9 марта 2016 Антон Кулешов

На сегодняшний день, мы обладаем уникальной возможностью – отслеживать многочисленные потоки информации и сохранять важный контент у себя на интернет страницах. В один клик регистрироваться и авторизоваться на сайтах и различных сервисах. Уже не проблема быть в курсе различных и разносторонних новостей из разных сфер жизни или оставаться на связи со своими близкими и знакомыми. Мы стали пользователями многочисленных социальных сетей и обладателями личных страниц с индивидуальными номерами, которые хранят срез наших интересов. Посещая магазины в интернете и сайты с товарами, мы с лёгкостью можем подарить лишнюю информацию о себе, не заполнив при этом ни одной формы. Для продавца каждый из нас потенциальный клиент, и он хочет знать, кто к нему зашёл на сайт и по какому запросу. И это возможно - мы сами можем вручить свой уникальный идентификатор (id) профиля в социальной сети даже не заметив этого, что даст продавцу больше шансов впарить свой товар. Достигается это путем использования разновидности кликджекинга, так называемого соцфишинга, об этом сегодняшняя статья.

Социальные кнопки поделиться – пишем сами! Часть 2. Добавляем счетчик

10 июня 2015 Антон Кулешов

Ой, вы, гой еси, дорогие мои читатели! Совсем недавно, каких-то там шесть постов назад, я поднял тему социальных кнопок и очень рад, что статья пришлась вам по душе, и вы используете эти самые кнопки и делитесь материалами с моего сайта. Как я и обещал, продолжаем развивать тему и сегодня прикрутим к нашим кнопкам еще и счетчик, вещь, согласитесь, весьма необходимую и существенную, дабы поднять нашу самооценку до известного уровня и при случае заткнуть за пояс конкурентов, предъявив свои солидные «пузомерки».

Как прижать футер к низу страницы

25 июля 2014 Антон Кулешов

В этой статье я расскажу о том, как прижать подвал сайта к низу страницы так, чтобы при масштабировании он оставался на своём месте и никуда не прыгал. Это не особо сложная задача, но у новичка, который только начал изучать HTML и CSS могут возникнуть с этим трудности.