Плагин для увеличения изображений 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> Но и для того как работает, переходим на демонстрацию и смотрим стиль и дизайн и функциональность. | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 2 | |
|
| |
