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

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

14 комментариев

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

  2. Для современный версий jQuery (после 1.8) замените в файле lightzoom.js на 102 строчке текст с
    $(new Image()).attr(‘src’, src).load(function() {
    на
    $(new Image()).attr(‘src’, src).on(‘load’, function() {

    иначе не работает.

    1. Спасибо за замечание. Метод .load() был убран в jQuery 3.0, поэтому до этой версии будет работать. В ближайшее время поправлю плагин для работы с jQuery 3.0

  3. Алексей, добрый день!
    Подскажите, а как обратиться к вашему плагину, если элемент подгружен динамически, при помощи ajax?

    1. Добрый день, Влад! В обработке удачного выполнения ajax-запроса еще раз активировать плагин, по другому ни как. Например:

      $.get( "test.php" ).done(function() {
      $('.lightzoom').lightzoom();
      });

      или

      $.ajax({
      url: 'ajax.php',
      type: 'POST',
      dataType: 'json',
      data: data
      })
      .done(function(data) {
      $('.lightzoom').lightzoom();
      });

    1. Михаил, нет, слайдер не предусмотрен. Я изначально не хотел реализовывать такой функционал — мне он только мешал.

  4. Добрый день! Спасибо за плагин! Настроила все, как по инструкции, но при клике на изображение у меня оно открывается в отдельном окне, а не повверх открытой страницы сайта. Посоветуйте пожалуйста, как это можно исправить.

  5. А почему на почту? Секрет? У меня ни один скрипт с ссылкой на изображение не работает. На локалке тружусь

    1. Потому что не факт, что задающий вопрос зайдет на сайт проверить ответ 🙂 У Анастасии была проблема с кодировкой — почему то в одной строке скрипта был набор символов.

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

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