Плагин 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	       // Используем фацет 
});

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

 

 

Авторизоваться и Скачать

5 последних добавленных файлов в рубрике"Скрипты"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 8 Февраля 2011 15:11
    denx_b
    Даже затеняет все остальное =О
  • 13 Февраля 2011 12:22
    Zedamin
    Спасибо!
  • 27 Апреля 2013 15:22
    digoron
    Добавляем код JavaScript, который запускает плагин: Куда это надо добавить? В какой файл?
  • 23 Мая 2013 11:02
    savastr
    ссылка не работает
  • 6 Июля 2013 20:44
    Aialonix
    Почему у Вас на всем сайте живой просмотр не пашет?
    • 3 Октября 2013 12:51
      alexandr_kulik
      Если в Хроме и стоит AdBlock то не работает, отключи и будет счастье.
^ Наверх ^