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

31

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

Упевнений, ви могли бачити роботу обох плагінів: і jQuery лупа, і jQuery Lightbox. Але от разом? Я лише нещодавно побачив такий плагін і вирішив поділитися їм з вами.

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

Тепер нам потрібні гарні картинки, які б зміг відкривати jQuery Lightbox. Чудові фотографії на будь-який смак ви завжди можете отримати, скориставшись сервісом unsplash. Я візьму картинки саме звідти:

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

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

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

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

$(function(){
$(«.zb»).zbox();
});

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

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

Але це ще не все, плагін jQuery адже ще пропонує і ефект лупи, яка дозволить розглянути зацікавив ділянку зображення в найдрібніших подробицях. Для цього достатньо лише підвести курсор миші до потрібного ділянці зображення.

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

Думаю, у вас вже з’явилися ідеї, як використовувати цей цікавий плагін в своїх проектах. Ну а у мене сьогодні все. Вихідні коди до статті ви можете завантажити за посиланням. Більше про jQuery і JavaScript ви можете дізнатися з наших уроків або курсу. Удачі!