» »

Плагин для увеличения изображений Lightbox 2

Плагин для увеличения изображений Lightbox 2

Вышла вторая версия плагина по увеличению изображение Lightbox 2. Которая полностью отличается от первой своей простой в работе. Здесь вы можете сделать галерею, что на некоторые тематике сайта можно увидеть. Работает по принципу 2 картинок. Это первая идет в заданном размере, это небольшая и вторая уже также по размерам, что выставляют, но уже в своей форме. Открывая первую картинку и чтоб ее не закрывать, там предусмотрена стрелка, которая проматывает как вперед так и в обратную сторону. Здесь нет кучи настроек, что было в первой версий и все уже по умолчанию сделано.

Вам нужно просто задать формат размера, потом написать как называется изображение, что для поисковых систем большой плюс. Но остальное идет как у всех, при нажатие идет загрузка быстрая и плавное раскрытие. Если вам нужно закрыть, то отключить все можно не на сомом изображение, а в нижнем правом углу на нажатие крестика. Если рассуждать по плагину, то здесь суть его проста, все идет в одинаковом размере под значением атрибута data-lightbox, что все будет объединять в некую мини галерею. И если приходится открывать одну из многих, то остальные сразу подключаются, что можно отлично просматривать а не искать что вам нужно, а переходить с одной на другую.

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

Здесь можно посмотреть, что под вторым номером идет картинка, но описание нет, но его лучше писать.

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

Приступаем к установке:

1. Скачиваем архив и размещаем файловом менеджере, архив залейте в папку js, файл стиля в папку css, все картинки в папку img.

2. Выбираем страницу, где будет галерея или фотоальбом и там прописываем после /head скрипт и стили.

Код
<link rel="stylesheet" href="/css/lightbox.css">  
  <script src="/js/lightbox.js"></script>


Это пример установке, ставим сколько вам нужно.

Код
<a href="http://zornet.ru/_ld/78/s45098594.jpg" data-lightbox="example-1" data-title="Описание к изображению первое">
  <img width="151px" src="http://zornet.ru/_ld/78/s45098594.jpg" />
</a>

<a href="http://zornet.ru/_ld/78/s26487139.jpg" data-lightbox="example-1" data-title="Описание к изображению второе">
  <img width="161px" src="http://zornet.ru/_ld/78/s26487139.jpg" />
</a>

Но и для того как работает, переходим на демонстрацию и смотрим стиль и дизайн и функциональность.
27.06.2017 Загрузок: 1 Просмотров: 519 Комментарий: (2)

Поделиться в социальных сетях

Материал разместил

Комментарий: 2
Scheme
Scheme 27.06.2017 04:041
0
Но это только под галерею, хотя с одной стороны правильно, не могу представить такое увеличение на вид материалов, но увеличение само красивее чем стандартное.
Kosten
Kosten 27.06.2017 04:102
0
Но для этого также можно поставить, в тот де вид материала и комментариев, если там по тематике всегда несколько изображений присутствует.
avatar