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

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

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

  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.
      Всегда подключал перед закрывающимся тегом , поэтому с этой проблемой не сталкивался. Буду искать как бороться с таким эффектом 🙂

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

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

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

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

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

    спасибо

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

  12. Доброй ночи! Подскажите, пожалуйста, как подключить данный скрипт к 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 моей темы еще это:

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

  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:
    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. Добрый вечер! Спасибо, что ответили!
        Сперва ниже, потом выше попробовал, но не помогло все равно.
        Я до этого тестировал 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 писал свой плагин, чтобы можно было подключать обычной установкой, но там версия старая — времени сейчас совсем нет 🙁

  14. Добрый вечер! Спасибо, что ответили!
    Сперва ниже, потом выше попробовал, но не помогло все равно.
    Я до этого тестировал 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? — как понять, где посмотреть?

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

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