LightZoom

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

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

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

Установка

  1. Загрузить последнюю версию (v1.1.0) плагина с моего сайта;
  2. Подключить jQuery;
  3. Подключить плагин (перед закрывающимся тегом body) и файл стилей:
    <link rel="stylesheet" href="lightzoom/style.css" type="text/css">
    <script type="text/javascript" src="lightzoom/lightzoom.js"></script>
  4. Активировать плагин, привязав к картинкам:
    <script type="text/javascript">jQuery('.lightzoom').lightzoom({speed: 400, viewTitle: true});</script>

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

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

<a href="ссылка на большое изображение" class="lightzoom"><img src="ссылка на изображение" /></a>

Я рекомендую подготавливать 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
  • boxClass — позволяет задавать класс окну обертке (с версии 1.1.0)
  • overlayColor — цвет фона (с версии 1.1.0)
  • titleColor — цвет подписи (с версии 1.1.0)

DEMO

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

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

  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();
      });

  4. а если на странице несколько картинок — можно ли добавить слайдер?

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

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

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

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

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

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

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

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

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

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

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

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

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

    1. Судя по всему плагин подключили неправильно. В чем именно у вас проблема? Что не получается по инструкции?

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

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

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

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

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

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

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

  12. Здравствуйте!

    в моём коде я сижу на $(window).resize(func…).

    вызов инициализации плагина [$this.resize();] вызывает ненужное срабатывание у меня.

    вот ваша функция
    resize: function() {
    var $this = this;
    $(window).resize(function() {
    $this.setDim();
    }).resize();
    },

    не совсем понятно что именно ресайзит последний .resize() , применяется он к window. может он должен применяться не к window, а к всплывающему боксу lightzoom или к картинке?

    спасибо

    1. Здравствуйте, Андрей! Если честно, уже не помню чем руководствовался, когда добавил последний .resize() Посмотрел, «покрутил» и прихожу к выводу что он вообще не нужен — видимо банальная опечатка 🙂

  13. Доброй ночи! Подскажите, пожалуйста, как подключить данный скрипт к wordpress?

    В файле header.php моей темы прописал:
    <link rel="stylesheet" type="text/css" href="/shadowbox/style.css»>
    <script type="text/javascript" src="/shadowbox/lightzoom.js»>
    jQuery(‘.lightzoom’).lightzoom({speed: 400, viewTitle: true});

    shadowbox — папка, в которую залил Ваш плагин.

    Для картинки в после указал class:

    и не работает!
    Заподозрил, что дело в jquery, добавил в файл header.php моей темы еще это:

    И опять ничего! 🙁

  14. Доброй ночи! Подскажите, пожалуйста, как подключить данный скрипт к wordpress?

    В файле header.php моей темы прописал:
    <link rel="stylesheet" type="text/css" href="/shadowbox/style.css»>
    <script type="text/javascript" src="/shadowbox/lightzoom.js»>
    jQuery(‘.lightzoom’).lightzoom({speed: 400, viewTitle: true});

    shadowbox — папка, в которую залил Ваш плагин.

    Для картинки в статье указал class:
    a href=»http://localhost/wp-content/uploads/2014/06/image9.jpg» class=»lightzoom»>

    и не работает!
    Заподозрил, что дело в jquery, добавил в файл header.php моей темы еще это:
    script src=»https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js»>

    И опять ничего! 🙁

    1. Сергей, а jQuery подключили выше подключения плагина?
      В отладчике присутствует подключенный файл плагина и jQuery?

      1. Добрый вечер! Спасибо, что ответили!
        Сперва ниже, потом выше попробовал, но не помогло все равно.
        Я до этого тестировал lightbox-plus-jquery.min.js, он уже с jquery идет, все работало, но мне Ваш куда больше нравится, так как тоже ничего не нужно лишнего, просто красивое увеличение картинки и все.

        Сейчас вот так:
        script src=»https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js»></script
        link rel="stylesheet" type="text/css" href="/shadowbox/style.css»>
        script type=»text/javascript» src=»/shadowbox/lightzoom.js»>jQuery(‘.lightzoom’).lightzoom();</script

        Убрал у script специально тут, чтобы было видно код в комментарии.

        А сама статья вот:

        Вроде все верно, не пойму, что не так?

        В отладчике присутствует подключенный файл плагина и jQuery? — как понять, где посмотреть?

      2. Разобрался! Видимо это особенности темы. Подключил все в файл footer.php и заработало!
        Подскажите, код вставить в этом файле правильно:
        1. до </body
        2. после </body
        3. после </html
        ?

        1. jQuery в WordPress есть, но он там бывает устаревший, поэтому и подключают свежую версию — Как подключить jQuery.
          Плагины я подключаю перед закрывающимся тегом < / body > — так страница загружается быстрее.
          Я для WordPress писал свой плагин, чтобы можно было подключать обычной установкой, но там версия старая — времени сейчас совсем нет 🙁

  15. Добрый вечер! Спасибо, что ответили!
    Сперва ниже, потом выше попробовал, но не помогло все равно.
    Я до этого тестировал lightbox-plus-jquery.min.js, он уже с jquery идет, все работало, но мне Ваш куда больше нравится, так как тоже ничего не нужно лишнего, просто красивое увеличение картинки и все.

    Сейчас вот так:
    script src=»https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js»></script
    link rel="stylesheet" type="text/css" href="/shadowbox/style.css»>
    script type=»text/javascript» src=»/shadowbox/lightzoom.js»>jQuery(‘.lightzoom’).lightzoom();</script

    Убрал у script специально тут, чтобы было видно код в комментарии.

    А сама статья вот:
    a href=»http://localhost/wp-content/uploads/2014/06/image9.jpg» class=»lightzoom»></a

    Вроде все верно, не пойму, что не так?

    В отладчике присутствует подключенный файл плагина и jQuery? — как понять, где посмотреть?

  16. Добрый день. А есть ли возможность установить крестик закрытия в угол открывающегося изображения?

  17. Добрый день! Почему то на некоторых устройствах(ipad mini2 и ipfone 4) не закрываются картинки тапами на фото и мимо ,включил все варианты закрытия. А на том же iphone X и 7+ все ок!

  18. Спасибо, работает.
    Хотя я только что голову ломал, что не так. Вроде все подключил. В CMS-ке выбираю картиночку на стрнанице, класс lightzoom через CKEditor указываю. И не работает. Лайтбокс появляется, но картинка в него грузится бесконечно. Потом сообразил, что класс редактор добавляет не к ссылке, а к img — вот такой эффект и получается.
    В общем, внимательно нужно. Может, кому-то полезным будет.

  19. Как отключать плагин на маленьких экранах? Нужно чтобы на телефонах ссылка работала именно как ссылка. Есть что-то типа метода unlightzoom() ?)

  20. Алексей, подскажите, пожалуйста, как и где добавить описание к картинке, как на примерах (под картинкой, на белом фоне)?

  21. Хотел добавить к своему вопросу про подпись к картинкам. Оказывается, она не видна в Bootstrap4, и не пойму, как исправить.

    1. Добрый день, Дмитрий. Не смог оперативно ответить на ваше письмо 🙂
      В плагине у изображения установлено свойство display: inline-block. Оно отцентрировано и снизу у него установлен внутренний (padding) отступ в 40 px. Сразу за ним, по коду размещается текст с высотой строки 20px и внешним верхним отступом (margin) 30px. Т.е. получается что текст наезжает на изображение, но т.к. у него снизу отступ, то получаем подпись.
      В bootstrap смотрите свойства изображения или абзаца (тег p). Там, судя по всему, «обнуляются» эти отступы.

      1. Алексей, спасибо за ответ!
        Описание (title) показывается нормально, и в Bootstarp тоже. Как оказалось, в одной теме оформления был включен показ tooltip, который забирал на себя title, поэтому при открытии картинки описания не было.

  22. Добрый день. Планируется ли реализация функционала пролистывания картинок. То есть: открыл картинку и не закрывая листать увеличенные картинки как галерею?

    1. Добрый день, Андрей. На данный момент такую доработку не планировал, так как изначально плагин задумывался именно для просмотра изображения во всплывающем окне, а не как галерея 🙂 Возможно, когда появится больше свободного времени, подумаю над этим функционалом.

      1. тоже очень хотелось бы во всплывающем окне видеть именно карусель а не единичное фото

      2. Благодарю за ответ.
        Еще такой вопрос. Сам крестик появляется в самом верху справа, а можно как-то его прикрепить к углу картинки…
        А то пользователи путаютя и не видят крестика…

      3. Алексей, если будете это делать, просмотр увеличенных картинок одну за другой, то подумайте, пожалуйста, на счёт включения и отключения такой возможности (чтобы был просмотр или по одной картинке, или несколько).

    1. Игорь, можно в css элементу с id #lz-close добавить свойство display: none;
      Если вы не знаете как это сделать, могу добавить параметр для отключения, но нужно будет переустанавливать плагин.

      1. Все получилось, еще подскажите пожалуйста как border убрать у картинки которая увеличенная?

  23. Алексей, очень спасибо за плагин. Вот прям идеально для начинающих, типа «понимаю еще не всё, но хочу что бы сразу красиво».

  24. Добрый день!
    После вставки кода
    jQuery(‘.lightzoom’).lightzoom({speed: 400, viewTitle: true});
    сайт уходит в ошибку 500.
    Вставлял перед </body после двух предыдущих строк. Может я что не так сделал?

    1. Добрый день, Игорь! Я думаю, что jQuery на вашем сайте довольна старая или возникает конфликт с другими плагинами.

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

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