Показать Меню
falbar Эффект лупы

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

Эффект лупы

Наверняка на многих сайтах Вы видели такой функционал как зумирование изображений, особенно это любят делать в интернет магазинах. Это позволяет пользователю максимально детально рассмотреть интересующий его товар. В этой статье мы рассмотрим один из 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 с меньшими размерами изображения.

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

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

<script type="text/javascript">
	$('.loop').loupe();
</script>

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

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

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

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

Спасибо за внимание.

Подписаться на обновления

Комментариев еще не оставлено