www.seomark.ru
Обзоры интересных и полезных программ, фотография, радио, веб-дизайн и т.д. и т.п. и др. и пр.

Веб-дизайн и поисковая оптимизация

Логотип Софт

Вебдизайн с 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: Мой e-mail
Перепечатка материалов сайта разрешается при условии сохранения имени автора и гиперссылки на www.seomark.ru
Ключевые слова: фотогалерея, скрипт фотогалереи, создание фотогалерей, увеличение изображений, плагин Nivo Zoom, jQuery