От автора: приветствую вас, друзья. Продолжаем знакомство с лучшими плагинами jQuery. Сегодня мы познакомимся с интересным jQuery слайдером, который позволяет просматривать фотографии с эффектом Lightbox на всю ширину экрана. Фактически мы получим полноэкранный jQuery слайдер и jQuery Lightbox slider.
Уверен, подобных jQuery слайдеров вы, как и я, встречали немало. Но сегодняшний слайдер я, пожалуй, считаю одним из лучших в своем роде. Кроме того, полученный слайдер будет дружелюбен к мобильным устройствам, поэтому вы без проблем сможете использовать его на адаптивных страницах.
Итак, подключим необходимые для работы jQuery слайдера файлы. Все файлы вы можете найти в исходниках к статье.
|
1 2 3 4 5 |
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <link href="css/jBox.css" rel="stylesheet"> <script src="//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> |
Теперь, как обычно, разметка. Сделаем что-то вроде небольшой галереи, в которой фотографии будут расположены в виде плиток.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<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’а.
|
1 2 3 4 5 6 7 |
<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.
Все просто, как видите. Мне нравится. На этом сегодня позвольте откланяться. Исходники к статье вы можете скачать по ссылке. Больше о jQuery и JavaScript вы можете узнать из наших уроков или курса. Удачи!
