От автора: и снова здравствуйте. Позвольте представить вам очередной плагин из разряда must have. Сегодня мы познакомимся с занимательным jQuery плагином, который соединил в себе функционал сразу двух популярных плагинов – jQuery Lightbox и jQuery лупа.
Уверен, по отдельности вы могли видеть работу обоих плагинов: и jQuery лупа, и jQuery Lightbox. Но вот вместе? Я лишь недавно увидел такой плагин и решил поделиться им с вами.
Скачать архив с плагином jQuery лупа и познакомиться с документацией к нему вы можете на этой странице на GitHub. Также необходимые файлы есть и в исходниках к данной статье. Подключим их к странице нашего проекта.
1 2 3 |
<link href="css/jquery.zbox.css" rel="stylesheet"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="js/jquery.zbox.js"></script> |
Теперь нам необходимы красивые картинки, которые бы смог открывать jQuery Lightbox. Великолепные фотографии на любой вкус вы всегда можете получить, воспользовавшись сервисом unsplash. Я возьму картинки именно оттуда:
1 2 3 4 5 6 7 8 9 10 |
<div class="container content"> <div class="row"> <div class="col-md-6"> <a class="zb" rel="group" href="//unsplash.it/4000/2667?image=885" title="long"> <img src="//unsplash.it/300/200?image=885"/> </a> </div> … </div> </div> |
Суть разметки достаточно проста: у нас есть превью изображения, которое помещено в ссылку на фотографию большего размера. При этом, коль мы хотим использовать jQuery лупу, нам желательно иметь действительно большое изображение.
Осталось запустить работу плагина, обратившись к методу zbox():
1 2 3 |
$(function(){ $(".zb").zbox(); }); |
Теперь кликнем по любому из изображений, чтобы открыть его в модальном окне jQuery Lightbox.
Но это еще не все, плагин jQuery ведь еще предлагает и эффект лупы, которая позволит рассмотреть интересующий участок картинки в мельчайших подробностях. Для этого достаточно лишь подвести курсор мыши к нужному участку изображения.
Думаю, у вас уже появились идеи, как использовать этот интересный плагин в своих проектах. Ну а у меня сегодня все. Исходники к статье вы можете скачать по ссылке. Больше о jQuery и JavaScript вы можете узнать из наших уроков или курса. Удачи!