Топ плагинов jQuery. Полноэкранный слайдер с эффектом Lightbox

Топ плагинов jQuery. Полноэкранный слайдер с эффектом Lightbox

От автора: приветствую вас, друзья. Продолжаем знакомство с лучшими плагинами jQuery. Сегодня мы познакомимся с интересным jQuery слайдером, который позволяет просматривать фотографии с эффектом Lightbox на всю ширину экрана. Фактически мы получим полноэкранный jQuery слайдер и jQuery Lightbox slider.

Уверен, подобных jQuery слайдеров вы, как и я, встречали немало. Но сегодняшний слайдер я, пожалуй, считаю одним из лучших в своем роде. Кроме того, полученный слайдер будет дружелюбен к мобильным устройствам, поэтому вы без проблем сможете использовать его на адаптивных страницах.

Итак, подключим необходимые для работы jQuery слайдера файлы. Все файлы вы можете найти в исходниках к статье.

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link href="css/jBox.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/jquery.touchSwipe.min.js"></script>
<script src="js/jBox-min.js"></script>

Теперь, как обычно, разметка. Сделаем что-то вроде небольшой галереи, в которой фотографии будут расположены в виде плиток.

<div class="container content">
 <img src="img/1.jpg" alt="" class="jbox-img">
 <img src="img/2.jpg" alt="" class="jbox-img">
 <img src="img/3.jpg" alt="" class="jbox-img">
 <img src="img/4.jpg" alt="" class="jbox-img">
 <img src="img/5.jpg" alt="" class="jbox-img">
 <img src="img/6.jpg" alt="" class="jbox-img">
 <img src="img/7.jpg" alt="" class="jbox-img">
 <img src="img/8.jpg" alt="" class="jbox-img">
 <img src="img/9.jpg" alt="" class="jbox-img">
 <img src="img/10.jpg" alt="" class="jbox-img">
 <img src="img/11.jpg" alt="" class="jbox-img">
 <img src="img/12.jpg" alt="" class="jbox-img">
</div>

Также нам потребуется разметка дополнительного блока, который будет выступать контейнером для jquery lightbox slider’а.

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

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

Узнать подробнее
<div class="jbox-container">
 <div class="img-alt-text"></div>
 <img src="" />
 <i id="prev" class="fa fa-angle-left"></i>
 <i id="next" class="fa fa-angle-right"></i>
 <i id="close" class="fa fa-times"></i>
</div>

Собственно, на этом все, — больше ничего не нужно. Если мы нигде не ошиблись, тогда должны увидеть примерно такую картину на странице:

Топ плагинов jQuery. Полноэкранный слайдер с эффектом Lightbox

Ну а клик по любой из фотографий откроет ее увеличенную копию в модальном окне и позволит переходить между картинками в полученном полноэкранном слайдере jQuery.

Топ плагинов jQuery. Полноэкранный слайдер с эффектом Lightbox

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

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

Курс по Gulp. Основы

Прямо сейчас посмотрите курс по Gulp!

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

Метки:

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

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

Комментарии 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