22 декабря 2015
28 января 2011
10
Zoomy — красивое и удобное решение для увеличения картинок
Всем привет!
Сегодня мы рассмотрим плагин Zoomy для jQuery, который позволяет рассматривать мелкие детали на картинках. Я про что-то подобное уже писал несколько лет назад в статье «Лупа на jQuery», но с тех пор прошло много времени, технологии не стоят на месте, да и это решение намного лучше.
Рассматриваемый плагин позволяет показывать увеличенную выбранную часть изображения поверх него, при это можно двигать мышкой по исходному изображению как увеличительным стеклом. Прямо как на картинке слева.
Принцип работы
Для работы, как понятно, надо две картинки — маленькая и большая одинаковых пропорций. Тени, загругления и блик сделаны с помощью CSS3 свойств border-radius, box-shadow и background: gradient + RGBA, соответственно. Указанные свойства работают в большинстве современных браузеров.
При наведении на маленькую картинку скрипт грузит большую в специальный блок, у которого показывается соответствующая часть.
HTML
Код достаточно простой — ссылка на большую картинку и внутри нее маленькая:
<a class="zoom" href="images/dollar-large.jpg">
<img src="images/dollar-small.jpg" />
</a>Далее подключаем CSS и JS:
...
<link type="text/css" rel="stylesheet" href="css/zoomy0.5.css" />
</head>
...
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript" src="js/jquery.zoomy0.5.js"></script>
...И вызываем плагин для соответствующих ссылок:
<script type="text/javascript">
$(function(){
$('.zoom').zoomy();
});
</script>Вот и все, если вы правильно все включили, все должно заработать.
Настройки
Их мало:
- zoomSize: определяет диаметр окружности в пикселах, по умолчанию 200;
- clickable: параметр, отвечающий за возможность кликнуть по ссылке-картинке, по умолчанию false;
- round: делать ли круглым, по умолчанию true;
- glare: блик, по умолчанию true.
Пример и архив со скриптом
Смотрим работу скрипта в живую или скачиваем себе архив:
Ну как вам? Уже знаете где применить? Пишите в комментариях!
Комментарии — 10
