Вебдизайн с jQuery - это очень просто!
Zoomy - лупа для просмотра изображений
С помощью бесплатной библиотеки скриптов jQuery можно легко организовать просмотр увеличенных изображений. Кроме рассмотренных ранее фотогалерей, существуют и другие интересные разработки, позволяющие в деталях изучить фотографию или рисунок. Для этого обычно используют увеличение небольшой миниатюры-превьюшки при наведении на неё курсора, а также лупу, которую можно передвигать по изображению.
Для создания такой лупы можно использовать плагин Zoomy, разработанный Якобом Лоу (Jacob Lowe), руководителем дизайн-студии в Калифорнии. Этот плагин позволяет получить эффект увеличительного стекла (лупы) для картинок, чтобы можно было рассмотреть на них мелкие детали. Пример работы лупы показан на рисунке:
Пример работы плагина Zoomy (лупа)
Установка плагина лупы Zoomy
Сначала скачиваем архив. Затем, как обычно, чтобы избежать путаницы, создадим на сайте новую папку, назвав её zoomy, и распакуем в неё скачанный архив. У нас получится три файла:
jquery-1.8.3.min.js, zoomy1.4.6.js и zoomy.css.
Далее необходимо добавить в заголовок страницы, на которой мы планируем использовать эффект лупы, внутрь тега <head>...</head> следующие строчки, указывающие пути к новым файлам, и небольшой JavaScript для инициализации и настройки Zoomy:
<link type="text/css" rel="stylesheet" href="zoomy/zoomy.css" />
<script type="text/javascript" src="zoomy/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="zoomy/zoomy1.4.6.js"></script>
<script type="text/javascript">
jQuery(function(){
jQuery('.zoom').zoomy('mouseover',{
zoomSize: 200,
round: true,
glare: false,
border: '5px solid #999'
});
});
</script>
Для работы плагина необходимы два изображения: основное (image.jpg), размещенное на странице, и увеличенное (image_big.jpg), на которое указывает ссылка с атрибутом class="zoom":
<a href="image_big.jpg" class="zoom"><img src="image.jpg" alt="Книга" width="350" height="200" /></a>.
Конечно, никто не запрещает использовать только одно, увеличенное, изображение, принудительно уменьшив его размеры на странице при помощи атрибутов width и height. Только не забывайте, что масштабирование, выполненное браузером, обычно ухудшает качество картинки.
На этом установка эффекта лупы закончена, и вы можете посмотреть его работу, открыв страницу с изображением в браузере.
Настройка параметров плагина Zoomy
Основные настройки лупы Zoomy можно сделать в размещенном нами вверху страницы скрипте, руководствуясь комментариями на русском языке. Если же вы хотите более подробно посмотреть или изменить и другие параметры плагина, то откройте файл zoomy 1.4.6.js в любом HTML-редакторе или в Блокноте. В самом начале файла есть строчки с доступными настройками, которые можно менять.
Как видим, установка и применение плагина лупы Zoomy не вызывает каких-либо трудностей и может быть выполнена буквально за несколько минут.
Важное замечание: если на вашем сайте используется несколько плагинов jQuery, то удобнее перенести файл jquery.js (желательно последней версии) в корневую папку, чтобы не загружать его несколько раз. В этом случае, строка обращения к нему будет выглядеть одинаково для всех плагинов. В частности, для нашего примера получается так:
<script src="jquery-1.8.3.min.js" type="text/javascript"></script>.
Не рекомендуется использовать на одной странице несколько разных версий jQuery, чтобы они не конфликтовали друг с другом. При этом обязательно проверяйте работу плагинов с установленной версией jQuery, так как не все версии взаимозаменяемы.
Далее рассмотрим еще один плагин jQuery для увеличения изображений - jLoupe, позволяющий легко создавать разные варианты лупы.
6.07.2013 г.
|