LightZoom
LightZoom – небольшой и легкий lightbox-плагин на jQuery, который позволяет увеличивать изображение при клике на нем. Настроек у него мало, только самые основные.
Плагин написан мной на основе урока “Увеличение изображения по клику”. Стараюсь обновлять по мере появления новых идей. Все вопросы и предложения оставляйте в комментариях. Готов доработать плагин увеличения изображения под ваши требования – моя цель сделать максимально удобный инструмент.
Установка и настройка плагина LightZoom
Установка
- Загрузить последнюю версию (v1.1.0) плагина с моего сайта;
- Подключить jQuery;
- Подключить плагин (перед закрывающимся тегом body) и файл стилей:
<link rel="stylesheet" href="lightzoom/style.css" type="text/css"> <script type="text/javascript" src="lightzoom/lightzoom.js"></script>
- Активировать плагин, привязав к картинкам:
<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)
Спасибо, Алексей!!!
Правил лендинг, 2-ое суток боролся с fancybox, из-за конфликта скриптов. Поставил твой вариант, все работает как часы! Спасибо!
Для современный версий jQuery (после 1.8) замените в файле lightzoom.js на 102 строчке текст с
$(new Image()).attr(‘src’, src).load(function() {
на
$(new Image()).attr(‘src’, src).on(‘load’, function() {
иначе не работает.
Спасибо за замечание. Метод .load() был убран в jQuery 3.0, поэтому до этой версии будет работать. В ближайшее время поправлю плагин для работы с jQuery 3.0
Уже поправили? )
Да. Плагин был поправлен в 2018 году 🙂
Алексей, добрый день!
Подскажите, а как обратиться к вашему плагину, если элемент подгружен динамически, при помощи ajax?
Добрый день, Влад! В обработке удачного выполнения ajax-запроса еще раз активировать плагин, по другому ни как. Например:
$.get( "test.php" ).done(function() {
$('.lightzoom').lightzoom();
});
или
$.ajax({
url: 'ajax.php',
type: 'POST',
dataType: 'json',
data: data
})
.done(function(data) {
$('.lightzoom').lightzoom();
});
Помогло! Спасибо за оперативный ответ!
а если на странице несколько картинок – можно ли добавить слайдер?
Михаил, нет, слайдер не предусмотрен. Я изначально не хотел реализовывать такой функционал – мне он только мешал.
Добрый день! Спасибо за плагин! Настроила все, как по инструкции, но при клике на изображение у меня оно открывается в отдельном окне, а не повверх открытой страницы сайта. Посоветуйте пожалуйста, как это можно исправить.
Анастасия, скиньте ссылку на сайт, посмотрю в чем проблема (если не хотите “светить” сайт, кидайте мне на почту admin@codernote.ru)
http://www.term-in.ru/ap11.html
Огромное спасибо!
Ответил на почту 🙂
А почему на почту? Секрет? У меня ни один скрипт с ссылкой на изображение не работает. На локалке тружусь
Потому что не факт, что задающий вопрос зайдет на сайт проверить ответ 🙂 У Анастасии была проблема с кодировкой – почему то в одной строке скрипта был набор символов.
По ходу та же проблема , что и у Анастасии выше – изображение открывается в отдельном окне. В чем может быть проблема? Cоздаю локально проект на NodeJs.
Михаил, у Анастасии была проблема с кодировкой. В одной из строк плагина был бессмысленный набор символов. После того как перезалили файл плагина проблема решилась. Можете дать адрес страницы с подключенным плагином – посмотрю?
Сделал по инструкции, картинка увеличивается, но никак не закрыть увеличенный вариант? Поменял все значения, где надо на true, но не помогло.
Не подскажите в чем м.б. причина? Ссылку дать не могу, т.к. пока все в офлайне(
Вы хотите чтобы окно закрывалось при нажатии на кнопку Esc? Крестик появляется чтобы можно было кликнуть в него мышью? Проблема может быть в значении свойства z-index. Еще можно посмотреть что происходит в консоли, нажав F12, перейти на вкладку консоль и попробовать закрыть картинку – будут ли ошибки?
Slick slider включение responsive ломает lightzoom , картинка открывается на черном фоне во все окно без значка закрытия. Подскажите, есть какое либо решение?
Денис, здравствуйте!
Я никогда не пользовался Slick Slider, поэтому не смогу быстро ответить на ваш вопрос. В ближайшие пару дней установлю где-нибудь, попробую разобраться.
Комментарии не появляются почему то
Денис, комментарии уходят на модерацию – очень много спама 🙂
Алексей, как сделать высоту одинаковой для всех картинок??
Ольга, высота увеличенного изображения устанавливается от 80% размера экрана и ограничивается высотой изображения. Поэтому изображения, которые умещаются на экран полностью и оригинальные размеры которых различаются будут различны. Как вариант, можно заранее подготовить изображения одинаковые по высоте. Либо, если очень надо, могу доработать плагин так, чтобы высота у всех выставлялась одинаковой. Но если у одного изображения высота 100px а у второго 1000px и указать параметр, например 500px, первая картинка будет выглядеть не очень хорошо – сильно увеличенной.
добрый вечер, я еще новичек в деле фронтенда, значит как активировать плагин и привязать его к картинкам и у меня картинка открывается в отдельном окне на черном фоне
Судя по всему плагин подключили неправильно. В чем именно у вас проблема? Что не получается по инструкции?
Активировать плагин, привязав к картинкам:
jQuery(‘.lightzoom’).lightzoom({speed: 400, viewTitle: true}); – куда эту строчку вставить? в тег head ? или перед закрывающим тегом body?
и файл стилей вроде в тэге head должен находиться, здесь я так понял картинку не вставишь ? что бы показать свой код и где все находится
После строки, где подключили файл плагина. Не важно в head или в footer. Я стараюсь скрипты подключать в футере, чтобы не мешали загружаться основному контенту.
спасибо попробуем
Доброго дня. Алексей, почему то переходит по ссылке картинки (http://сайт/image/1.jpg), а не открывает как задумано.
Выкладываю весь код:
;(function($){
$(‘.lightzoom’).lightzoom({
speed: 400,
viewTitle: true,
isOverlayClickClosing: false,
isWindowClickClosing: true,
isEscClosing: true
});
})(jQuery);
Здравствуйте! Такая ошибка возникает когда не подключен jQuery или подключен сначала плагин а потом библиотека. Также возможно конфликт с каким то другим плагином jQuery. Надо смотреть ошибки в консоли отладчика.
jquery подключен, других библиотек нет.
https://drive.google.com/open?id=1c9X-V1Txk32KLvGIQc0oVkIfqZJmiIfm
в предыдущей комментарии ссылка не верная
вот правильная ссылка
https://drive.google.com/open?id=1jcxM3WuQTZ2ROCO1-D5WtZG7l_suJlAZ
Код “запуска” плагина сделайте перед закрывающимся тегом – будет работать (у меня с вашими файлами заработало). Получается, что в момент инициализации плагина страница не загрузилась, поэтому плагин не “видит” элементы с классом lightzoom.
Всегда подключал перед закрывающимся тегом , поэтому с этой проблемой не сталкивался. Буду искать как бороться с таким эффектом 🙂
Здравствуйте!
в моём коде я сижу на $(window).resize(func…).
вызов инициализации плагина [$this.resize();] вызывает ненужное срабатывание у меня.
вот ваша функция
resize: function() {
var $this = this;
$(window).resize(function() {
$this.setDim();
}).resize();
},
не совсем понятно что именно ресайзит последний .resize() , применяется он к window. может он должен применяться не к window, а к всплывающему боксу lightzoom или к картинке?
спасибо
Здравствуйте, Андрей! Если честно, уже не помню чем руководствовался, когда добавил последний .resize() Посмотрел, “покрутил” и прихожу к выводу что он вообще не нужен – видимо банальная опечатка 🙂
спасибо! 🙂
Доброй ночи! Подскажите, пожалуйста, как подключить данный скрипт к 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 моей темы еще это:
И опять ничего! 🙁
Доброй ночи! Подскажите, пожалуйста, как подключить данный скрипт к 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”>
И опять ничего! 🙁
Сергей, а jQuery подключили выше подключения плагина?
В отладчике присутствует подключенный файл плагина и jQuery?
Добрый вечер! Спасибо, что ответили!
Сперва ниже, потом выше попробовал, но не помогло все равно.
Я до этого тестировал 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? – как понять, где посмотреть?
А вообще, насколько я знаю, в WP ведь уже есть jquery?
Разобрался! Видимо это особенности темы. Подключил все в файл footer.php и заработало!
Подскажите, код вставить в этом файле правильно:
1. до </body
2. после </body
3. после </html
?
jQuery в WordPress есть, но он там бывает устаревший, поэтому и подключают свежую версию – Как подключить jQuery.
Плагины я подключаю перед закрывающимся тегом < / body > – так страница загружается быстрее.
Я для WordPress писал свой плагин, чтобы можно было подключать обычной установкой, но там версия старая – времени сейчас совсем нет 🙁
Добрый вечер! Спасибо, что ответили!
Сперва ниже, потом выше попробовал, но не помогло все равно.
Я до этого тестировал 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? – как понять, где посмотреть?
Добрый день. А есть ли возможность установить крестик закрытия в угол открывающегося изображения?
Добрый день. В текущей реализации нет.
Добрый день! Почему то на некоторых устройствах(ipad mini2 и ipfone 4) не закрываются картинки тапами на фото и мимо ,включил все варианты закрытия. А на том же iphone X и 7+ все ок!
Спасибо, работает.
Хотя я только что голову ломал, что не так. Вроде все подключил. В CMS-ке выбираю картиночку на стрнанице, класс lightzoom через CKEditor указываю. И не работает. Лайтбокс появляется, но картинка в него грузится бесконечно. Потом сообразил, что класс редактор добавляет не к ссылке, а к img — вот такой эффект и получается.
В общем, внимательно нужно. Может, кому-то полезным будет.
Как отключать плагин на маленьких экранах? Нужно чтобы на телефонах ссылка работала именно как ссылка. Есть что-то типа метода unlightzoom() ?)
Артём, такой функции нет.
Думаю можно попробовать реализовать.
Алексей, подскажите, пожалуйста, как и где добавить описание к картинке, как на примерах (под картинкой, на белом фоне)?
Хотел добавить к своему вопросу про подпись к картинкам. Оказывается, она не видна в Bootstrap4, и не пойму, как исправить.
Добрый день, Дмитрий. Не смог оперативно ответить на ваше письмо 🙂
В плагине у изображения установлено свойство display: inline-block. Оно отцентрировано и снизу у него установлен внутренний (padding) отступ в 40 px. Сразу за ним, по коду размещается текст с высотой строки 20px и внешним верхним отступом (margin) 30px. Т.е. получается что текст наезжает на изображение, но т.к. у него снизу отступ, то получаем подпись.
В bootstrap смотрите свойства изображения или абзаца (тег p). Там, судя по всему, “обнуляются” эти отступы.
Алексей, спасибо за ответ!
Описание (title) показывается нормально, и в Bootstarp тоже. Как оказалось, в одной теме оформления был включен показ tooltip, который забирал на себя title, поэтому при открытии картинки описания не было.
Добрый день. Планируется ли реализация функционала пролистывания картинок. То есть: открыл картинку и не закрывая листать увеличенные картинки как галерею?
Добрый день, Андрей. На данный момент такую доработку не планировал, так как изначально плагин задумывался именно для просмотра изображения во всплывающем окне, а не как галерея 🙂 Возможно, когда появится больше свободного времени, подумаю над этим функционалом.
тоже очень хотелось бы во всплывающем окне видеть именно карусель а не единичное фото
Благодарю за ответ.
Еще такой вопрос. Сам крестик появляется в самом верху справа, а можно как-то его прикрепить к углу картинки…
А то пользователи путаютя и не видят крестика…
Алексей, если будете это делать, просмотр увеличенных картинок одну за другой, то подумайте, пожалуйста, на счёт включения и отключения такой возможности (чтобы был просмотр или по одной картинке, или несколько).
подскажите пожалуйста, как убрать крестик сверху
Игорь, можно в css элементу с id #lz-close добавить свойство display: none;
Если вы не знаете как это сделать, могу добавить параметр для отключения, но нужно будет переустанавливать плагин.
Все получилось, еще подскажите пожалуйста как border убрать у картинки которая увеличенная?
Вы имеете в виду белую рамку? За неё отвечает параметр imgPadding. Установите его в значение 0.
Алексей, очень спасибо за плагин. Вот прям идеально для начинающих, типа “понимаю еще не всё, но хочу что бы сразу красиво”.
Наталья, я рад, что плагин вам пригодился 🙂
Добрый день!
После вставки кода
jQuery(‘.lightzoom’).lightzoom({speed: 400, viewTitle: true});
сайт уходит в ошибку 500.
Вставлял перед </body после двух предыдущих строк. Может я что не так сделал?
Добрый день, Игорь! Я думаю, что jQuery на вашем сайте довольна старая или возникает конфликт с другими плагинами.
Автор, привет.
Что-то тоже, вроде всю подключаю, а скрипт не работает. Не мог бы ты помочь? jQuery подключён т.к. другой скрипт работает. Хотел перейти на ваш, но что-то как то не выходит.
А как вы подключаете плагин? Какие-нибудь ошибки в режиме разработчика выдаются?
Если ваш сайт доступен в интернете, сможете скинуть на него ссылку тут или через форму обратной связи?
Скинул