От автора: и снова здравствуйте. Позвольте представить вам очередной плагин из разряда must have. Сегодня мы познакомимся с еще одним jQuery плагином, реализующим эффект а-ля Lightbox для просмотра фотографий в модальном окне. В статье мы используем плагин Little Lightbox, являющийся аналогом jQuery Lightbox.
Сегодня практически на каждом сайте возникает необходимость организовать небольшую галерею или просто одиночное изображение, которое хотелось бы увеличить при клике и показать увеличенную копию изображения. Ко всему прочему хотелось бы показать увеличенное изображение красиво: без перезагрузки страницы и с симпатичным эффектом. Все это позволяют сделать плагины а-ля jQuery Lightbox (по названию одного из первых плагинов в своем роде).
Именно благодаря востребованности подобных плагинов предлагается огромное количество, что называется — на любой вкус. Можно сказать, что плагины jQuery Lightbox являются, пожалуй, наиболее популярными jQuery плагинами.
Сегодня мы поработаем с плагином jQuery Little Lightbox, вот его страница на GitHub. Скачайте архив с файлами оттуда или же, как обычно, возьмите из исходников. Подключим необходимые для работы файлы:
|
1 2 3 |
<link href="css/jquery.littlelightbox.css" rel="stylesheet"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="js/jquery.littlelightbox.js"></script> |
Теперь разметка и несколько красивых фотографий:
|
1 2 3 4 5 6 7 8 |
<div class="container content"> <div class="row"> <div class="col-md-3"> <a class="lightbox thumbnail" href="//unsplash.it/800/600?image=239" data-littlelightbox-group="gallery" title="Flying is life"><img src="//unsplash.it/300/200?image=239" alt="Flying is life" /></a> </div> ... </div> </div> |
И напоследок — вызов плагина методом littleLightBox():
|
1 |
$('.lightbox').littleLightBox(); |
В итоге мы получим небольшую фотогалерею с просмотром оригинальных изображений в модальном окне – jQuery Lightbox.
Пару слов относительно разметки. Одинаковое значение атрибута data-littlelightbox-group позволяет сгруппировать фотографии для просмотра. Ну а содержимое атрибута title используется для подписи картинок.
Плагин jQuery Little Lightbox также имеет ряд опций. Например, опции openMethod и closeMethod позволяют сменить анимационный эффект при открытии и закрытии картинок. Все доступные опции и их значения вы можете найти в объекте defaults в коде плагина.
Ну а у меня на сегодня все. В итоге мы получили отличную альтернативу плагина jQuery Lightbox. Исходники к статье вы можете скачать по ссылке. Больше о jQuery и JavaScript вы можете узнать из наших уроков или курса. Удачи!
