Топ плагинов jQuery. Плагин jQuery лупа

Топ плагинов jQuery. Плагин jQuery лупа

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

Уверен, по отдельности вы могли видеть работу обоих плагинов: и jQuery лупа, и jQuery Lightbox. Но вот вместе? Я лишь недавно увидел такой плагин и решил поделиться им с вами.

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

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

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

Топ плагинов jQuery. Плагин jQuery лупа

Осталось запустить работу плагина, обратившись к методу zbox():

Теперь кликнем по любому из изображений, чтобы открыть его в модальном окне jQuery Lightbox.

Топ плагинов jQuery. Плагин jQuery лупа

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

Топ плагинов jQuery. Плагин jQuery лупа

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

Метки:

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

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