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