www.seomark.ru
Обзоры интересных и полезных программ, фотография, радио, веб-дизайн и т.д. и т.п. и др. и пр.
Веб-дизайн и поисковая оптимизация
Вебдизайн с jQuery - это очень просто!
• Фотогалерея jQuery - просто и красиво!
• Фотогалерея jQuery со слайд-шоу
• Фотогалерея для интернет магазина
• Фотогалерея prettyPhoto
• Фотогалерея Fancybox
• Карусель изображений jQuery Waterwheel
• Простая карусель JCarouselLite
• Календарь в форме обратной связи
• Создание простого анимированного меню
• Создание слайд-шоу для сайта
• Zoomy - лупа для просмотра изображений
• Увеличение изображений. Плагин Nivo Zoom
>> смотреть все статьи о jQuery
Увеличение изображений колесом мыши. Плагин ZoomScroll
На сайтах интернет-магазинов для детального показа товаров часто используют различные эффекты зуммирования (увеличения/уменьшения) изображений. Обычно они строятся на базе плагинов бесплатной библиотеки скриптов jQuery, некоторые из которых были рассмотрены ранее, например, в статье Увеличение изображений. Плагин Nivo Zoom.
Существует несколько способов зуммирования изображений: эффект "лупы", вывод увеличенной картинки рядом с миниатюрой, разворачивание изображений по клику мыши или при наведении её на миниатюру и зуммирование колесиком мыши. Последний эффект, на мой взгляд, наиболее выразительный. Проще всего его реализовать с помощью плагина ZoomScroll, разработанного Кириллом Шапаровым. Подробное описание c примерами и разные версии плагина можно посмотреть на его сайте.
Пример увеличения изображения с помощью ZoomScroll показан на рисунке справа - кликните для увеличения.
Для управления зумом используется мышь:
колесо мыши вверх — увеличение изображения,
колесо мыши вниз — уменьшение изображения,
двойной щелчок мышью возвращает изображение в исходное положение,
для перемещения - захват изображения мышью и перетаскивание.
Установка плагина ZoomScroll
Для установки ZoomScroll сначала создадим на сайте новую папку, назвав её, как вы правильно подумали, zoomscroll. Затем скачиваем архив и распаковываем его в созданную папку. В результате в ней будет несколько скриптов (jquery-1.6.4.min.js и др.), файл стилей jquery.zoomscroll-2.0.1.css и вспомогательные изображения закрытия окна и загрузки. Далее вставим в заголовок страницы внутрь тега <head>...</head> следующие строчки, указывающие пути к файлам ZoomScroll, и небольшой скрипт инициализации плагина:
<link rel="stylesheet" type="text/css" href="zoomscroll/jquery.zoomscroll-2.0.1.css" />
<script src="zoomscroll/jquery-1.6.4.min.js" type="text/javascript"></script>
<script type="text/javascript" src="zoomscroll/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="zoomscroll/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="zoomscroll/jquery.zoomscroll-2.0.1.js"></script>
<script type="text/javascript">
$(window).load(function() {
$("a.picture").zoomscroll();
})
</script>
Для увеличения изображения с помощью ZoomScroll достаточно иметь два изображения - миниатюру (small) и полноразмерное (big), на которое указывает ссылка с class="picture", то есть HTML-код нашего примера выглядит так:
<a href="image_big.jpg" title="Увеличить" class="picture">
<img src="image_small.jpg" width="160" height="107" alt=" "/></a>.
Конечно, если вам лень создавать две картинки, то можно использовать только одно увеличенное изображение, а для его уменьшения в браузере задать нужные размеры на странице при помощи атрибутов width и height. Только учтите, что масштабирование, выполненное браузером, обычно приводит к ухудшению качества:
<a href="image_big.jpg" title="Увеличить" class="picture">
<img src="image_big.jpg" width="160" height="107" alt=" "/></a>.
Вот и всё! Можете любоваться эффектом зума, открыв страницу с вашей картинкой в браузере. Дополнительных настроек плагина не предусмотерно, но некоторые параметры можно изменять в CSS-файле jquery.zoomscroll-2.0.1.css.
О других программах создания на сайте фотогалерей, каруселей изображений и слайд-шоу смотрите в статьях о jQuery и в разделе "Веб-дизайн и SEO".
14.04.2014г.
Copyright © 2008 - Марк Розенталь e-mail:
Перепечатка материалов сайта разрешается при условии сохранения имени автора и гиперссылки на www.seomark.ru