- Метки дополнения:
- изображения
- jquery
Плагин 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 последних добавленных файлов в рубрике"Скрипты"
-
Плагин для создания круговых обзорных изображений с управлением курсором
ThreeSixty - плагин jQuery для создания из серии изображений кругового обзорного представления, которое управляется с помощью мыши или курсора.
-
Набор стилей для чекбоксов
9 наборов правил для оформления чекбоксов на страницах и формах веб проекта.
-
Выскальзывающие счетчики категорий
Набор правил CSS для формирования выскальзывающих ярлыков с количеством записей в категории или метке.
-
Круглый элемент управления на CSS
Набор правил и разметка для организации оригинального элемента управления для веб проекта.
-
CSS код индикатора загрузки
Интересный индикатор загрузки, сделанный без использования изображений и JavaScript.