LightZoom

LightZoom — небольшой и легкий lightbox-плагин на jQuery, который позволяет увеличивать изображение при клике на нем. Настроек у него мало, только самые основные.

Плагин написан мной на основе урока «Увеличение изображения по клику». Стараюсь обновлять по мере появления новых идей. Все вопросы и предложения оставляйте в комментариях. Готов доработать плагин увеличения изображения под ваши требования — моя цель сделать максимально удобный инструмент.

Установка и настройка плагина LightZoom

Установка

  1. Загрузить последнюю версию плагина с моего сайта;
  2. Подключить jQuery;
  3. Подключить плагин (перед закрывающимся тегом body) и файл стилей:
  4. Активировать плагин, привязав к картинкам:

Требования к изображению на сайте

Каждое изображение, для которого необходимо применить плагин, «оборачивается» ссылкой с классом lightzoom. В итоге должна получится конструкция:

Я рекомендую подготавливать 2 изображения — маленькое, которое будет выводиться на странице (ссылка в <img>) и большое (ссылка в <a>), которое будет показываться при клике по маленькому изображению. Благодаря такой конструкции можно увеличить скорость загрузки сайта.

Если нет желания делать 2 изображения, то ссылки в <img> и в <a> должны вести на одно и тоже изображение, а картинка на странице уменьшаться средствами css.

Параметры плагина:

  • speed — скорость появления;
  • imgPadding — значение отступа (число), по умолчанию 10;
  • overlayOpacity — прозрачность фона (от 0 до 1);
  • viewTitle — показывать ( true ) или нет ( false ) подпись под изображением, по умолчанию true;
  • isOverlayClickClosing — закрытие ( true ) картинки по клику в затемненной области (overlay) (false если необходимо отключить)
  • isWindowClickClosing — закрытие ( true ) картинки по клику в любой области (в том числе и на картинке) (false если необходимо отключить)
  • isEscClosing — закрытие ( true ) картинки при нажатии на клавишу Esc

DEMO

Сказать спасибо

1 комментарий

  1. Спасибо, Алексей!!!
    Правил лендинг, 2-ое суток боролся с fancybox, из-за конфликта скриптов. Поставил твой вариант, все работает как часы! Спасибо!

Оставить комментарий

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