Скрипт увеличения картинки или замена плагину Responsive Lightbox

Приветствую Вас, дорогие читатели. Сегодня расскажу Вам, как мы можем удалить еще один плагин и заменить его функционал очень легким скриптом. Речь пойдет о плагине Responsive Lightbox. Как мы уже знаем, то данный шаблон идет с рядом уже встроенных плагинов, от которых мы постепенно избавляемся, тем самым ускоряя работу сайта. От одного плагина мы уже избавились, о чем я рассказывал в прошлой статье о постраничной навигации без плагина, если еще не читали, то рекомендую.

Плагин Responsive Lightbox

Расскажу не много о данном плагине и для чего он нужен. Любой сайт или статья содержит картинки, а красиво оформленная картинка это еще большей плюс для сайта. Одним из таких плюсов является, увеличении картинки при нажатии на нее. Смотрим пример ниже.

При нажатии на изображение появилось всплывающее окно, в котором можно рассмотреть изображение в полном размере. Конечно функционал плагина на этом не заканчивается. Мы так же можем создавать галереи с помощью его и плавно их просматривать. Очень много настроек данного плагина и разные виды галерей и просмотров изображений.

Скажу честно, плагин хороший, но все что он выполняет, можно легко заменить скриптом по увеличению картинок. Качаем скрипт Simplbox и делаем настройки, которые я опишу ниже.

Скрипт увеличения картинок и создания галерей

Надеюсь скрипт скачали, распаковываем архив и кидаем содержимое в корень сайта. Вот так должно получиться:

После чего открываем файл footer.php и вставляем следующий код в самый низ перед закрывающимся тегом

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<script type="text/javascript">
(function(){
var boxes=[],els,i,l;
if(document.querySelectorAll){
els=document.querySelectorAll('a[rel=simplebox]');
Box.getStyles('simplebox_css','http://site.ru/simplebox.css');
Box.getScripts('simplebox_js','http://site.ru/simplebox.js',function(){
simplebox.init();
for(i=0,l=els.length;i<l;++i)
simplebox.start(els[i]);
simplebox.start('a[rel=simplebox_group]');
});
}
})();script>

Можно сказать 99% работы выполнено.  1% оставим на тестирование скрипта.

Для теста вставляем картинку на сайт:

Выделяем ее и жмем на карандаш для редактирования изображения:

В разделе «дополнительные настройки» в поле «отношение» пишем simplebox и нажимаем обновить.

Проверяем работу, все замечательно работает, но это еще не все. Теперь попробуем сделать галерею. Для примера, я вставлю три изображения ниже и повторю все что описал ранее.

Тестируем и видим, что сейчас появилась возможность пролистывать изображения.

Подведем итог проделанной работы, мы удалили плагин  Responsive Lightbox, при этом реализовали весь его функционал, скриптом увеличения картинок. По моему проделанная работа такого стоила.

Если у вас возникли вопросы по установке или настройке данного скрипта, пишите в комментариях к статье. Постараюсь всем помочь. До скорой связи!

С уважением, Виктор