Веб-дизайн и поисковая оптимизация. Эффект лупы с использованием jQuery Увеличение изображения эффект лупы в jquery ui

Был рассмотрен плагин увеличения изображения Zoomy , имитирующий реальную лупу. В некоторых случаях его использование неудобно, так как лупа перекрывает основную картинку и затрудняет фокусировку на нужном участке. Для точного позиционирования точки увеличения можно использовать другой вариант лупы - jLoupe . Этот плагин для бесплатной библиотеки скриптов jQuery разработан веб-дизайнером Крисом Юфером (Chris Iufer). Он имеет значительно больше настроек и позволяет создавать красивые эффекты, имитирующие лупу, выводя увеличенный фрагмент изображения рядом с курсором-указателем.

Три варианта работы плагина jLoupe показаны на рисунке. Слева - лупа каплевидная и является ссылкой на вывод полномасштабного изображения, в центре - лупа прямоугольная без ссылки, справа - лупа в виде окружности. К сожалению, скругление, так же как и в рассмотренном ранее плагине лупы Zoomy , не работает в браузерах IЕ6 - IЕ8. Поэтому в них лупа всегда прямоугольная, а правый вариант, вообще, сплошное безобразие.

Примеры работы плагина jLoupe Установка плагина лупы jLoupe

Сначала скачиваем архив . Затем, как всегда, чтобы избежать путаницы, создадим на сайте новую папку, назвав её jloupe , и распакуем в неё скачанный архив. У нас получится три файла:
jquery-1.8.3.min.js, jquery.jloupe.js и вспомогательное изображение для круглой лупы loupe-trans.png.

Для работы плагина достаточно задать для изображения class="jloupe" , а сам вывод лупы можно организовать несколькими способами:
1. Создать два изображения - основное (image.jpg) и увеличенное (image_big.jpg). В теге изображения, размещенного на странице, указать путь к увеличенному варианту с помощью атрибута data-original:
.
2. Использовать только одно увеличенное изображение, а для его уменьшения в браузере задать нужные размеры на странице при помощи атрибутов width и height . Только не забывайте, что масштабирование, выполненное браузером, обычно ухудшает качество картинки:
.
3. Если необходимо дать ссылку на открытие большого изображения или на другой объект, то используйте следующую форму:
.

На этом установка плагина jLoupe закончена, и вы можете посмотреть его работу, открыв страницу с изображением в браузере.

Важное замечание: если на вашем сайте используется несколько плагинов jQuery , то удобнее перенести файл jquery.js (желательно последней версии) в корневую папку, чтобы не загружать его несколько раз. В этом случае, строка обращения к нему будет выглядеть одинаково для всех плагинов. В частности, для нашего примера получается так:
.
Не рекомендуется использовать на одной странице несколько разных версий jQuery , чтобы они не конфликтовали друг с другом. При этом обязательно проверяйте работу плагинов с установленной версией jQuery , так как не все версии взаимозаменяемы.

Настройка параметров плагина jLoupe

Основные настройки лупы jLoupe задаются в файле jquery.jloupe.js . Для их изменения откройте его в любом HTML-редакторе или в Блокноте. В самом начале файла есть строчки с доступными настройками, которые можно менять:

Свойство Установка по умолчанию Описание настройки лупы

width	200	ширина
height	200	высота
margin	6	отступ вокруг лупы
cursorOffsetX	10	горизонтальное расстояние от курсора
cursorOffsetY	10	вертикальное расстояние от курсора
color	false	разрешить использование цветов
borderColor	"#999"	цвет границы
backgroundColor	"#ddd"	цвет фона
radiusLT	0	верхний левый радиус скругления лупы
radiusLB	100	нижний левый радиус скругления лупы
radiusRT	100	правый верхний радиус скругления лупы
radiusRB	100	правый нижний радиус скругления лупы
image	false	адрес внешней картинки для лупы (image url) - определяет вид лупы. В правом примере - это изображение круга loupe-trans.png
repeat	false	повторение background image
fade	true	использование затемнения при выводе лупы
fadeIn	true	время затемнения при открытии (ms)
fadeOut	true	время затемнения при закрытии (ms)

Например, для показанного вверху статьи варианта каплевидной лупы (слева) использованы настройки по умолчанию, а для правого рисунка следующие:
radiusLT: 100,
margin: 12,
borderColor: false,
backgroundColor:"#ffffee",
image: "jloupe/loupe-trans.png"

Для варианта прямоугольной лупы (в центре) внешняя картинка не требуется (image: false):
radiusLT: 0,
radiusRT: 10,
radiusRB: 0,
radiusLB: 10,
width: 300,
height: 150,
borderColor: "#f2730b",
backgroundColor: "#000",
fade: false,
image: false

О других программах увеличения изображений, а также создания на сайте фотогалерей, каруселей изображений и слайд-шоу смотрите в и в разделе "

1. Плагин jQuery лупа

Увеличение квадратной области.

2. Cloud Zoom

Этот плагин по качеству реализации ни чем не уступает коммерческим скриптам по масштабированию изображений, например, такому как Magic Zoom. Много различных возможностей и совместимость с наиболее популярными браузерами. Рекомендую посмотреть этот скрипт в деле на демонстрационной странице. Я думаю, он не оставит вас равнодушными.

3. jQuery плагин для увеличения области текста или изображения под мышкой

Относительно гибкий скрипт. Отображаемые области легко настраиваются с помощью CSS. Плагин увеличивает небольшую зону, находящуюся под мышкой. Переключение между большим и малым размером всего содержимого осуществляется двойным кликом

4. jQuery плагин для увеличения изображения

Выполнен в виде экрана iPhone.

5. MooTools плагин «Zoomer»

Для детального просмотра изображения достаточно просто навести курсор мыши на него.

6. jQuery портфолио с zoom-эффектом

Интересная реализация портфолио, созданная путем взаимосвязи двух jQuery плагинов: Cloud Zoom и Fancybox. При наведении курсора мыши на миниатюру появляется увеличенная копия области, находящейся под курсором. При нажатии на миниатюру открывается Fancybox галерея, с помощью которой можно просмотреть несколько полноразмерных изображений для данного проекта в портфолио.

7. jQuery плагин «Easy Image Zoom»

Увеличение области, находящейся под курсором.

8. jQuery плагин «Zoomy»

Эффект лупы для увеличения части изображения.

9. jQuery плагин «BeZoom» 10. jQuery плагин «ImageLens»

Эффект увеличительной лупы при наведении курсора мыши на изображение. Реализовано с помощью jQuery.

11. jQuery плагин «Magnifier»

Эффект увеличения области изображения при наведении.

12. Зуммер изображений для интернет-магазина «jqZoom»

Можно использовать для реализации детального просмотра товара в интернет магазинах.

13. Просмотр большого изображения в ограниченной области

jQuery плагин дает возможность реализовать просмотр большого изображения в каком-нибудь ограниченном блоке. В этом случае навигация будет осуществляться с помощью перемещения прямоугольника по миниатюре.

14. AJAX-zoom плагин

AJAX-zoom представляет собой плагин очень функциональной галереи, с большим набором функций. Плагин работает на JQuery и PHP и имеет более 250 вариантов отображения. В дополнение его функциональности - это очень гибкий плагин, который может быть интегрирован в любой сайт.

Плагин Zoomy реализует красивый эффект наведения лупы над изображением. Все выполнено на высшем уровне — лупа выглядит «как живая».

Проверено в:

• IE 6-8
• Firefox 4
• Opera 9.5-10
• Safari 4
• Chrome

Что качать?

• библиотеку jquery качаем или .
• (10.99 Kb) — плагин или его (4.49 Kb).
• (2.87 Kb) стили для лупы.

Быстрый старт

Подключаем библиотеки и таблицу стилей:

HTML простой и интуитивно понятный — маленькая картинка, обернутая ссылкой на большую. Для удобства инициализации ссылке присвоим класс zoom.

Инициализируем плагин:

jQuery(function(){ jQuery(".zoom").zoomy(); });

Вот собственно и все.

А теперь подробнее

При инициализации, можно передавать следующие параметры:

Параметры zoomy() События

Можно настраивать включение лупы в зависимости от действий пользователя. Доступны четыре события:

Примеры инициализации с параметрами

Настраиваем лупу. Задаем размер, русифицируем надпись, изменяем атрибут с адресом большой картинки.

В данном уроке мы разберем создание эффекта лупы для статического изображения только средствами jQuery и CSS.

Шаг 1. XHTML

Разметка для получения эффекта достаточно проста. мы используем только несколько div и изображение.

demo.html

div #iphone отображает рамку iРhone. Внутри нее располагается div #webpage со скриншотом страницы. Скриншот показывается в половину от своего действительного размера, таким образом мы используем одно и тоже изображение для мелкой версии (показанной в рамке iPhone) и для большой версии, которая показывается в круглом окошке.

Также там есть div #retina, для которого задана круглая форма с помошью CSS3. Он отображает большую версию скриншота страницы как фон и смещается при движении курсора мыши.

Шаг 2. CSS

Зададим стили для div #iphone, #webpage и #retina, что сделает возможным воплощение задуманного эффекта.

style.css #iphone{ /* Рамка div iphone */ width:750px; height:400px; background:url("img/iphone_4G.png") no-repeat center center; position:relative; } #webpage{ /* Сожержит скриншот страницы */ width:499px; height:283px; position:absolute; top:50%; left:50%; margin:-141px 0 0 -249px; } #retina{ /* Эффект лупы */ background:url("img/webpage.png") no-repeat center center white; border:2px solid white; /* Позиционирование абсолютное, таким образом мы можем перемещать ее */ position:absolute; height:180px; width:180px; /* Скрыть по умолчанию */ display:none; /* A blank cursor, notice the default fallback */ cursor:url("img/blank.cur"),default; /* Тень CSS3 */ -moz-box-shadow:0 0 5px #777, 0 0 10px #aaa inset; -webkit-box-shadow:0 0 5px #777; box-shadow:0 0 5px #777, 0 0 10px #aaa inset; /* Скругленные углы CSS3 */ -moz-border-radius:90px; -webkit-border-radius:90px; border-radius:90px; } #retina.chrome{ cursor:url("img/blank_google_chrome.cur"),default; } #main{ /* Основной div */ margin:40px auto; position:relative; width:750px; }

Задавая абсолютное позиционирование div на странице, мы можем использовать технику вертикального и горизонтального центрирования, которая позволяет эффективно размещать скриншот в центре рамки iphone.

div #retina также получает абсолютное позиционирование, таким образом, возможно перемещать его в части jQuery просто задавая смещение от верха и слева. Данный div также имеет скриншот страницы в качестве фона (в своем оригинальном размере). Смещение фона при перемещении div созает иллюзию увеличения маленького кусочка скриншота позади него..

Также div #retina имеет граничный радиус со значением, равным ровно половине его ширины, что делает его точно круглым (по крайней мере в браузерах, которые поддерживают свойство border-radius CSS3 - Chrome, Safari, Opera и Firefox).

И в завершении мы прячем указатель мыши установкой пустого курсора (Google Chrome выдает ошибку при отрисовке полностью пустого курсора, поэтому нам надо установить для него белый курсор размером в 1px). Opera полностью игнорирует пользовательские курсоры, и сделать ничего нельзя с данным фактом. Поэтому пользователи данного браузера будут иметь негативный опыт при просмотре эффекта.

Шаг 3. jQuery

Стили заданы, пора приступать к программированию.

script.js $(document).ready(function(){ /* Код выполняется при получении события ready */ var left = 0, top = 0, sizes = { retina: { width:190, height:190 }, webpage:{ width:500, height:283 } }, webpage = $("#webpage"), offset = { left: webpage.offset().left, top: webpage.offset().top }, retina = $("#retina"); if(navigator.userAgent.indexOf("Chrome")!=-1) { retina.addClass("chrome"); } webpage.mousemove(function(e){ left = (e.pageX-offset.left); top = (e.pageY-offset.top); if(retina.is(":not(:animated):hidden")){ webpage.trigger("mouseenter"); } if(left sizes.webpage.height) { /* Если мы находимся вне границ сриншота страницы, то прячем div retina */ if(!retina.is(":animated")){ webpage.trigger("mouseleave"); } return false; } /* Перемещаем div retina за мышью (и прокручиваем фон) */ retina.css({ left: left - sizes.retina.width/2, top: top - sizes.retina.height/2, backgroundPosition: "-"+(1.6*left)+"px -"+(1.35*top)+"px" }); }).mouseleave(function(){ retina.stop(true,true).fadeOut("fast"); }).mouseenter(function(){ retina.stop(true,true).fadeIn("fast"); }); });

В функции mousemove текущие координаты курсора мыши передаются как e.pageX и e.pageY , но они являются абсолютными по отношению ко всему документу. Вычитая смещение div #webpage, мы получаем относительные координаты курсора мыши, которые позже используются для позиционирования div #retina.

Таким образом, в комбинации с пустым курсором мы создаем эффект лупы используя только JavaScript и CSS.

Заключение

Дебаты между приверженцами Flash и HTML5 разгорелись с новой силой в последнее время, так как люди начали искать способы получать тот же уровень функциональности без задействования внешних приложений. Данный подход приводит к более простым приложениям. Однако надо помнить о сохранении кроссбраузерности решений, что удается далеко не всегда (вспомните IE).

Надеюсь, что урок Вам понравился!