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

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

Плагин Responsive Lightbox

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

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

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

Скачать

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

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

копируем simplebox в корень сайта

После чего открываем файл 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>

http://site.ru меняем на имя вашего сайта, я поставил http://nonbox.ru

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

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

фото собаки

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

редактируем изображение

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

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

Важно! Для показа изображений в галереи, вместо слова simplebox, пишем simplebox_group

фото собаки спящая собака страус

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

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

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

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

Рейтинг: 0

Автор публикации

10
не в сети 2 недели

Виктор

Молодой блогер с большим опытом :)

Комментарии: 11Публикации: 59Регистрация: 11-11-2015

Похожее ...

3 Комментарии

  1. Интернет Маркетолог:

    Вставил всё правильно, Всё вроде бы работает, но не верно. Картинка почему то увеличивается только в одну сторону... Меняя значения, добиваюсь того же результата... только уже по горизонтали... Что добавить в код? Что бы картинка увеличивалась и уменьшалась по обеим сторонам?

    Ответить

    Рейтинг: 0
  2. Виктор:

    Интернет Маркетолог, как понять увеличивается в одну сторону ?

    Ответить

    Рейтинг: 0
  3. vivadonna.ru:

    Михаил, здравствуйте. Ваш скрипт работает корректно, спасибо. А подскажите, пожалуйста, можно ли сделать так, чтобы при увеличении картинка оказывалась в определенном заданном месте таблицы? И как это сделать?

    Ответить

    Рейтинг: 0

Добавить комментарий

Войти с помощью: 

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

0
  • В вашей корзине:
    Пока пусто

Авторизация

Войти с помощью: 

Регистрация

Войти с помощью: 

Генерация пароля