Эффект лупы при помощи jQuery плагина

25 сентября 2014 Антон Кулешов 4393 0

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

Реклама

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

Для начала нам, как обычно необходимо подключить библиотеку и сам плагин.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="jquery.loupe.min.js" type="text/javascript"></script>

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

Вариант 1

<img class="loop" src="img2.jpg" width="191" height="240" alt="img" />

Вариант 2

<a class="loop" href="img1_2.png">
	<img src="img1_1.png" width="191" height="240" alt="img" />
</a>

В первом варианте для того, чтобы зумирование работало правильно нам необходимо указать атрибуты width и height с меньшими размерами изображения.

Во втором примере в пути картинки мы указываем изображение, на которое будет применяться эффект лупы, а в пути ссылки - изображение которое будет показываться при наведении.

После того как мы поместили разметку на страницу осталось вызвать сам плагин.

$(".loop").loupe();

Вот и всё, после всех этих действий приятный эффект зумирования будет получен.

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

$(".loop").loupe({
	width: 50,     // ширина лупы
	height: 50,    // высота лупы
	loupe: "loupe" // css класс лупы
});

Надеюсь, вам понравился jQuery плагин loupe, и вы оценили его удобство.

Реклама
Комментариев еще не оставлено
no_avatar
Читайте далее

Сборник анимации на CSS3

22 августа 2015 Антон Кулешов

Сегодня для создания конкурентно-способного веб-ресурса приходится учитывать многое: начиная от интуитивно понятного дизайна страницы и заканчивая различными текстами, которые должны привлечь и удержать посетителя. Мы же в этой статье уделим внимание динамике, происходящей на страницах, которая стала неотъемлемой их частью. Если раньше для того, чтобы добавить какой-нибудь эффект нам приходилось использовать различные библиотеки или писать код на JavaScript, то сейчас лучший способ оживить сайт - это воспользоваться анимацией за счёт CSS3.

Waves - волна под курсором

21 мая 2015 Антон Кулешов

Эффекты при клике не столь популярны как hover effects, однако, сегодня мой взор упал на плагин под названием waves.

Э-Зум, зум, зум-м-м! Ну, или как мы картинки увеличивали

25 февраля 2015 Антон Кулешов

Алоха! Всем счастья и добра, ну а сегодня наша тема – увеличение картинки (изображения) при клике мышью. Причем, не только простое зумирование, но и его динамическая проработка.