Плагин Zoomy для масштабированного вывода изображений

Что такое Zoomy?

Zoomy - быстрый и маленький плагин для масштабирования изображений. Нужно две копии одного изображения: первая - для выводимого варианта, вторая -  для масштабированного варианта. Большинство CMS хранят или создают копии одного изображения в разных размерах, поэтому использовать плагин будет очень просто. Устанавливаем ссылку на масштабированное изображение для выводимого изображения и сообщаем плагину, что нужно использовать ссылку. Все занимает несколько строк кода:

$(function(){
   $('.zoom').zoomy();                
})(jQuery)

Как работает Zoomy

В основу работы Zoomy положена простая концепция. Организуется область просмотра, которая очень похожа на обычную  лупу. Для достижения эффекта  используется два элемента. Элемент div содержит масштабированное изображение, а опциональный элемент span содержит фон с градиентом CSS3. Кроме того, Zoomy имеет простой загрузчик больших изображений и функции для позиционирования области масштабированного изображения и установки эффекта фацета.

Как использовать Zoomy

Использовать плагин очень просто. Присоединяем jQuery, файл 'zoomy.css' и файл плагина Zoomy (либо jquery.zoomy0.5.min.js, либо jquery.zoomy0.5.js).

<link type="text/css" rel="stylesheet" href="каталог/zoom.css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript" src="каталог/jquery.zoomy0.5.min.js."></script>

В разметке ставим в нужном месте изображение, которое будет использовать плагин:

<a href="масштабированное_изображение.jpg" class="zoom">
   <img src="выводимое_изображение.jpg" alt="Это изображение выводится" />
</a>

Добавляем код JavaScript, который запускает плагин:

$(function(){
   $('.zoom').zoomy();                
})(jQuery)

Опции плагина

Zoomy использует три свойства CSS3. Скругленные углы, градиентную заливку и цвет rgba для создания эффекта фацета (полированная фаска по краю стекла или зеркала). Все эти свойства можно отключить. Также можно поменять размер  области масштабированного изображения (по умолчанию 200 х 200 px). Также есть опция для включения реакции на событие click на изображении. По умолчанию она отключена. Но если нужно использовать Zoomy совместно с другим плагином (например, лайтбоксом), то их можно будет легко объединить.

$('.zoom').zoomy({
   zoomSize: 200,     // Размер области масштабированного изображения 
   clickable: false,  // Реакция на событие click
   round: true,       // Используем скругленные углы
   glare: true	       // Используем фацет 
});

Живой просмотр