www.seomark.ru
Обзоры интересных и полезных программ, фотография, радио, веб-дизайн и т.д. и т.п. и др. и пр.
Веб-дизайн и поисковая оптимизация
Вебдизайн с jQuery - это очень просто!
• Фотогалерея jQuery - просто и красиво!
• Фотогалерея jQuery со слайд-шоу
• Фотогалерея для интернет магазина
• Фотогалерея prettyPhoto
• Фотогалерея Fancybox
• Карусель изображений jQuery Waterwheel
• Простая карусель JCarouselLite
• Календарь в форме обратной связи
• Создание простого анимированного меню
• Создание слайд-шоу для сайта
• Zoomy - лупа для просмотра изображений
• Увеличение изображений. Плагин Nivo Zoom
>> смотреть все статьи о 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',{ //включение лупы: 'click'-по щелчку, 'mouseover'-при наведении мыши, 'mouseenter'-вхождение мыши на объект
zoomSize: 200, //размер лупы
round: true, //true - круглая лупа, false - квадратная, (в IE6-8 не работает, лупа всегда будет квадратной)
glare: false, //true - градиентная размывка вверху линзы (подсветка) есть, 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 г.
Далее - jLoupe - красивый имитатор лупы
Copyright © 2008 - Марк Розенталь e-mail:
Перепечатка материалов сайта разрешается при условии сохранения имени автора и гиперссылки на www.seomark.ru