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

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

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

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

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

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

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

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

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

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

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

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

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

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

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

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

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

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

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

Метки:

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

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree