Топ плагинов jQuery. Плагин jQuery Little Lightbox для фотографий

Топ плагинов jQuery. Плагин jQuery Little Lightbox для фотографий

От автора: и снова здравствуйте. Позвольте представить вам очередной плагин из разряда must have. Сегодня мы познакомимся с еще одним jQuery плагином, реализующим эффект а-ля Lightbox для просмотра фотографий в модальном окне. В статье мы используем плагин Little Lightbox, являющийся аналогом jQuery Lightbox.

Сегодня практически на каждом сайте возникает необходимость организовать небольшую галерею или просто одиночное изображение, которое хотелось бы увеличить при клике и показать увеличенную копию изображения. Ко всему прочему хотелось бы показать увеличенное изображение красиво: без перезагрузки страницы и с симпатичным эффектом. Все это позволяют сделать плагины а-ля jQuery Lightbox (по названию одного из первых плагинов в своем роде).

Именно благодаря востребованности подобных плагинов предлагается огромное количество, что называется — на любой вкус. Можно сказать, что плагины jQuery Lightbox являются, пожалуй, наиболее популярными jQuery плагинами.

Сегодня мы поработаем с плагином jQuery Little Lightbox, вот его страница на GitHub. Скачайте архив с файлами оттуда или же, как обычно, возьмите из исходников. Подключим необходимые для работы файлы:

<link href="css/jquery.littlelightbox.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/jquery.littlelightbox.js"></script>

Теперь разметка и несколько красивых фотографий:

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее
<div class="container content">
 <div class="row">
  <div class="col-md-3">
 <a class="lightbox thumbnail" href="https://unsplash.it/800/600?image=239" data-littlelightbox-group="gallery" title="Flying is life"><img src="https://unsplash.it/300/200?image=239" alt="Flying is life" /></a>
  </div>
  ... 
 </div>
</div>

И напоследок — вызов плагина методом littleLightBox():

$('.lightbox').littleLightBox();

В итоге мы получим небольшую фотогалерею с просмотром оригинальных изображений в модальном окне – jQuery Lightbox.

Топ плагинов jQuery. Плагин jQuery Little Lightbox для фотографий

Пару слов относительно разметки. Одинаковое значение атрибута data-littlelightbox-group позволяет сгруппировать фотографии для просмотра. Ну а содержимое атрибута title используется для подписи картинок.

Плагин jQuery Little Lightbox также имеет ряд опций. Например, опции openMethod и closeMethod позволяют сменить анимационный эффект при открытии и закрытии картинок. Все доступные опции и их значения вы можете найти в объекте defaults в коде плагина.

Ну а у меня на сегодня все. В итоге мы получили отличную альтернативу плагина jQuery Lightbox. Исходники к статье вы можете скачать по ссылке. Больше о jQuery и JavaScript вы можете узнать из наших уроков или курса. Удачи!

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Курс по jQuery: основы

Изучите jQuery с нуля до результата!

Смотреть курс

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree