www.seomark.ru
Обзоры интересных и полезных программ, фотография, радио, веб-дизайн и т.д. и т.п. и др. и пр.
Веб-дизайн и поисковая оптимизация
Вебдизайн с jQuery - это очень просто!
• Фотогалерея jQuery - просто и красиво!
• Фотогалерея jQuery со слайд-шоу
• Фотогалерея для интернет магазина
• Фотогалерея prettyPhoto
• Фотогалерея Fancybox
• Карусель изображений jQuery Waterwheel
• Простая карусель JCarouselLite
• Календарь в форме обратной связи
• Создание простого анимированного меню
• Создание слайд-шоу для сайта
• Zoomy - лупа для просмотра изображений
• Увеличение изображений. Плагин Nivo Zoom
>> смотреть все статьи о jQuery
Увеличение изображений. Плагин Nivo Zoom
Nivo Zoom - плагин бесплатной библиотеки скриптов jQuery, предназначенный для увеличения изображений при клике по ним. Он разработан компанией Dev7studios, создателем популярного красивого слайдера Nivo Slider (см. статью Nivo Slider - красивое слайд-шоу для сайта). Эта компания расположена в Шотландии, специализируется на веб-приложениях, её основатель и руководитель - Гилберт Пеллегром (Gilbert Pellegrom).
Nivo Zoom удобно использовать для вывода увеличенных изображений в различных каталогах и прайсах, а также для небольших фотогалерей.
Подробное описание плагина можно посмотреть на официальном сайте Nivo Zoom. Два примера увеличения изображений с помощью Nivo Zoom показаны на рисунке (в правом примере дополнительно выводится надпись под изображением):
Установка плагина Nivo Zoom
Для установки Nivo Zoom сначала создадим на сайте новую папку, назвав её, не мудрствуя лукаво, nivozoom. Затем скачиваем архив и распаковываем его в созданную папку. В результате в ней будет два файла скриптов jquery-1.4.4.min.js и jquery.nivo.zoom.js, файл стилей nivo-zoom.css и вспомогательные изображения лупы и загрузки. Далее вставим в заголовок страницы внутрь тега <head>...</head> следующие строчки, указывающие пути к файлам Nivo Zoom, и небольшой скрипт инициализации плагина:
<link rel="stylesheet" type="text/css" href="nivozoom/nivo-zoom.css" media="screen"/>
<script type="text/javascript" src="nivozoom/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="nivozoom/jquery.nivo.zoom.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('body').nivoZoom();
});
</script>
Важное замечание: если на вашем сайте используется несколько плагинов jQuery, то удобнее перенести файл jquery.js (желательно последней версии) в корневую папку, чтобы не загружать его несколько раз. В этом случае, строка обращения к нему будет выглядеть одинаково для всех плагинов. В частности, для нашего примера получается так:
<script src="jquery-1.4.4.min.js" type="text/javascript"></script>
Не рекомендуется использовать на одной странице несколько разных версий jQuery, чтобы они не конфликтовали друг с другом. При этом обязательно проверяйте работу плагинов с установленной версией jQuery, так как не все версии взаимозаменяемы.
Для увеличения изображения с помощью скрипта Nivo Zoom можно использовать два способа:
1. Создать два изображения: миниатюру (image.jpg) и увеличенную картинку (image_big.jpg). Затем поместить их в тег ссылки с классом class="nivoZoom":
<a href="image_big.jpg" title="Увеличить" class="nivoZoom">
<img src="image.jpg" width="160" height="107" alt=" "/></a>.
2. Использовать только одно увеличенное изображение, а для его уменьшения в браузере задать нужные размеры на странице при помощи атрибутов width и height. Только не забывайте, что масштабирование, выполненное браузером, обычно ухудшает качество картинки:
<a href="image_big.jpg" title="Увеличить" class="nivoZoom">
<img src="image_big.jpg" width="160" height="107" alt=" "/></a>.
Если вы хотите дополнительно вывести надпись под изображением, как в правом примере, то текст необходимо поместить в тег <div class="nivoCaption"> внутрь ссылки:
<a href="image_big.jpg" title="Увеличить" class="nivoZoom">
<img src="image.jpg" width="160" height="107" alt=" "/>
<div class="nivoCaption">Гена и Чебурашка</div></a>.
Такая конструкция не проходит проверку на валидность (соответствие исходного кода сайта нормам и правилам, описанным Консорциумом Всемирной Паутины), но в большинстве браузеров проблем не возникает.
Настройки Nivo Zoom
Основные настройки оформления изображений находятся в файле стилей nivo-zoom.css, которые можно изменять обычным способом.
Указание положения миниатюры относительно увеличенного изображения задается дополнительным аргументом в классе ссылки. Например, с классом class="nivoZoom topLeft" миниатюра расположена слева вверху от увеличенного изображения. Другие варианты - center, topRight, bottomLeft, bottomRight, надеюсь, понятны без перевода. Единственно, следите, чтобы эти дополнительные значения классов не были использованы в других CSS для области с картинками (например, center - распространенный вариант названия правила). Для показанных в начале статьи примеров установлен class="nivoZoom bottomRight"(левый пример) и class="nivoZoom bottomLeft" (правый пример).
Кроме основных, вы можете исследовать и поменять другие настройки Nivo Zoom, расположенные в файле jquery.nivo.zoom.js. Откройте его в любом редакторе или Блокноте и найдите их в самом конце файла. Настроек не много и они имеют следующие значения:
speed:500, //скорость открытия увеличенной картинки
zoomHoverOpacity:0.8, //прозрачность значка зума
overlay:true, //для отсутствия фона - false
overlayColor:'#333', //цвет фона
overlayOpacity:0.7 //прозрачность фона
captionOpacity:0.8 //прозрачность надписи
Впрочем, для большинства применений подходят настройки плагина, принятые по умолчанию.
Плагин Nivo Zoom корректно работает во всех браузерах, за исключением, как не трудно догадаться, некоторых версий Internet Explorer (must die!). В этом браузере при близком расположении на странице картинок-миниатюр возможно их наложение на увеличенное изображение, неверное определение размеров увеличенного изображения и, конечно же, в IE не выводятся тени и скругленные углы, украшающие вывод картинок.
Кроме описанного плагина, для увеличения изображений часто используют скрипт фотогалереи Highslide. Это самостоятельный продукт, работающий без jQuery. Его подробное описание смотрите в статье Увеличение изображений. Программа Highslide JS.
О других программах создания на сайте фотогалерей, каруселей изображений и слайд-шоу смотрите в статьях о jQuery и в разделе "Веб-дизайн и SEO".
14.07.2013 г.
Copyright © 2008 - Марк Розенталь e-mail:
Перепечатка материалов сайта разрешается при условии сохранения имени автора и гиперссылки на www.seomark.ru