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

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

34 комментария

  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. Потому что не факт, что задающий вопрос зайдет на сайт проверить ответ 🙂 У Анастасии была проблема с кодировкой — почему то в одной строке скрипта был набор символов.

  6. По ходу та же проблема , что и у Анастасии выше — изображение открывается в отдельном окне. В чем может быть проблема? Cоздаю локально проект на NodeJs.

    1. Михаил, у Анастасии была проблема с кодировкой. В одной из строк плагина был бессмысленный набор символов. После того как перезалили файл плагина проблема решилась. Можете дать адрес страницы с подключенным плагином — посмотрю?

  7. Сделал по инструкции, картинка увеличивается, но никак не закрыть увеличенный вариант? Поменял все значения, где надо на true, но не помогло.
    Не подскажите в чем м.б. причина? Ссылку дать не могу, т.к. пока все в офлайне(

    1. Вы хотите чтобы окно закрывалось при нажатии на кнопку Esc? Крестик появляется чтобы можно было кликнуть в него мышью? Проблема может быть в значении свойства z-index. Еще можно посмотреть что происходит в консоли, нажав F12, перейти на вкладку консоль и попробовать закрыть картинку — будут ли ошибки?

  8. Slick slider включение responsive ломает lightzoom , картинка открывается на черном фоне во все окно без значка закрытия. Подскажите, есть какое либо решение?

    1. Денис, здравствуйте!

      Я никогда не пользовался Slick Slider, поэтому не смогу быстро ответить на ваш вопрос. В ближайшие пару дней установлю где-нибудь, попробую разобраться.

    1. Ольга, высота увеличенного изображения устанавливается от 80% размера экрана и ограничивается высотой изображения. Поэтому изображения, которые умещаются на экран полностью и оригинальные размеры которых различаются будут различны. Как вариант, можно заранее подготовить изображения одинаковые по высоте. Либо, если очень надо, могу доработать плагин так, чтобы высота у всех выставлялась одинаковой. Но если у одного изображения высота 100px а у второго 1000px и указать параметр, например 500px, первая картинка будет выглядеть не очень хорошо — сильно увеличенной.

  9. добрый вечер, я еще новичек в деле фронтенда, значит как активировать плагин и привязать его к картинкам и у меня картинка открывается в отдельном окне на черном фоне

      1. Активировать плагин, привязав к картинкам:

        jQuery(‘.lightzoom’).lightzoom({speed: 400, viewTitle: true}); — куда эту строчку вставить? в тег head ? или перед закрывающим тегом body?
        и файл стилей вроде в тэге head должен находиться, здесь я так понял картинку не вставишь ? что бы показать свой код и где все находится

        1. После строки, где подключили файл плагина. Не важно в head или в footer. Я стараюсь скрипты подключать в футере, чтобы не мешали загружаться основному контенту.

  10. Доброго дня. Алексей, почему то переходит по ссылке картинки (http://сайт/image/1.jpg), а не открывает как задумано.
    Выкладываю весь код:

    ;(function($){
    $(‘.lightzoom’).lightzoom({
    speed: 400,
    viewTitle: true,
    isOverlayClickClosing: false,
    isWindowClickClosing: true,
    isEscClosing: true
    });
    })(jQuery);

    1. Здравствуйте! Такая ошибка возникает когда не подключен jQuery или подключен сначала плагин а потом библиотека. Также возможно конфликт с каким то другим плагином jQuery. Надо смотреть ошибки в консоли отладчика.

    1. Код «запуска» плагина сделайте перед закрывающимся тегом — будет работать (у меня с вашими файлами заработало). Получается, что в момент инициализации плагина страница не загрузилась, поэтому плагин не «видит» элементы с классом lightzoom.
      Всегда подключал перед закрывающимся тегом , поэтому с этой проблемой не сталкивался. Буду искать как бороться с таким эффектом 🙂

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

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