Эффект лупы на странице в html. Вебдизайн с jQuery - это очень просто! jQuery плагин «ImageLens»

В статье рассмотрена процедура установки плагина cloud-zoom на базе jQuery, а также описаны вспомогательные настройки плагина для оптимизации отображения увеличительного окна.

Довольно часто на ресурсах с большим запасом графического материала прибегают к применению приема лупы. К примеру, имеется изображение большого размера и разрешения. Чтобы оно поместилось в видимую зону экрана, его понадобится уменьшить, что ухудшит читабельность картинки, сложно будет рассмотреть детали. В этом случае поможет специальный плагин, который будет локально увеличивать определенные зоны картинки при наведении. Также такой прием очень часто используется в интернет-магазинах для того, чтобы потенциальный клиент мог хорошо в деталях изучить предлагаемый ему товар.

Стоит отметить, что в сети довольно много схожих программных пакетов, которые позволяют реализовать лупу для изображений. Поэтому логично выбрать из всего множества плагинов наиболее оптимальный вариант. Во время проведения своего анализа, я выбрал 3 основных критериев, по которым проводил отбор:

• поддержка разных браузеров;
• объем функциональных возможностей;
• объем плагина и скорость, с которой он работает.

Первый вариант, который идеально подошел к моим критериям, стал cloud-zoom . Эта статья будет посвящена установке и работе только этого скрипта, а последующие решения, которые тоже соответствуют поставленным критериям, будут рассмотрены в будущих статьях.

Установка

Итак, cloud-zoom . Автором этой разработки является некий профессор Туча, стоит уважить его труды и поблагодарит за этот продукт. В первую очередь хотелось бы отметить главное преимущество скрипта, в сравнении с другими – способность кода взаимодействовать с разными форматами галерей.

Первым этапом установки плагина станет скачивание последней jQuery, также непосредственно, файл самого плагина и таблица стилей к нему. Все это можно найти на официальном ресурсе продукта.

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

HTML

/*в head */ < link rel= "stylesheet" type= "text/css" href= "cloud-zoom/cloud-zoom.css" /> /*в body*/ < script type= "text/javascript" src= "https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" > < script type= "text/javascript" src= "cloud-zoom/cloud-zoom.1.0.2.js" >

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

HTML

< a class = "cloud-zoom" href= "big-img.jpg" > < img src= "small-img.jpg" />

Как вы можете заметить, ничего сверхъестественного в типовой конструкции HTML-тела плагина нет: ссылка на увеличенное изображение и сама картинка внутри нее. Также хочу отметить, что принципиально важно указать класс плагина, иначе скрипт не сработает. Если все было сделано правильно, то в браузере вы будете наблюдать примерно следующую картину

Как видно, окно лупы намертво прилипло к уменьшенной версии картинки. Этот недочет устраняется посредством специальных настроек, которые корректируют оформление и положение окна лупы. В данном примере рассмотрим, как можно поправить местоположение окна лупы

HTML

< a class = "cloud-zoom" href= "big-img.jpg" rel= "adjustX: 20, adjustY: 0" > < img src= "small-img.jpg" />

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

Настройки

Ниже приведен список всех возможных настроек плагина и краткое их описание

• zoomWidth – определяет размер ширины окна для вывода локального увеличения картинки. Если для этого параметра ничего не определено, то окно повторит значение ширины картинки.
• zoomHeight – определяет размер высоты окна для вывода локального увеличения картинки. Если для этого параметра ничего не определено, то окно повторит значение высоты картинки.
• position – переопределяет позицию расположения окна для вывода. Аналогично одноименному CSS-свойству, принимает значения "left", "right", "top" и "bottom". Позиция устанавливается относительно рассматриваемой картинки. Также можно определить вывод окна в необходимом контейнере через привязку к идентификатору. За это отвечает значение "blockId".
• adjustX – устанавливает положение окна лупы относительно оси координат абсцисс.
• adjustY – устанавливает положение окна лупы относительно оси координат ординат.
• tint – отвечает за цвет рамки, которая обрамляет окно вывода лупы. Не работает при использовании параметра softFocus.
• tintOpacity – определяет просвечиваемость границ курсора лупы.
• lensOpacity – определяет просвечиваемость границ окна вывода лупы.
• softFocus – придает эффект размытия той части картинки, которую не захватывает курсор лупы. Не работает при использовании параметра tint.
• smoothMove – позволяет настроить более плавное передвижение курсора лупы в зоне изучаемой картинки.
• showTitle – соответствует функциям обычного атрибута title.
• titleOpacity – позволяет контролировать прозрачность блока с описанием картинки.

В тоже время к настройкам можно отнести форматирование таблицы стилей. Ниже показан список всех селекторов таблицы, а также какой из них какому элементу лупы соответствует:

• .cloud-zoom-lens – курсор, который определяет локальную зону увеличения.
• .cloud-zoom-title – отвечает за стилизацию заголовка лупы.
• .cloud-zoom-big – окна для вывода увеличения картинки.
– оформление сообщения загрузки информации.

Работа в режиме галереи

В том случае, когда мы работаем с галереей, структура кода немного изменяется, и в то же время появляется несколько новых параметра настроек. Рассмотрим на живом примере

HTML

< a class = "cloud-zoom" href= "big-img.jpg" id= "loupe1" rel= "position: "right", adjustX: 10, adjustY: 0" > < img src= "small-img.jpg" width= "200" /> < ul> < li> < a class = "cloud-zoom-gallery" href= "big-img.jpg" title= "" rel= > < img src= "small-img.jpg" width= "100" /> < li> < a class = "cloud-zoom-gallery" href= "masdefault.jpg" title= "" rel= "useZoom: "loupe1", smallImage: "small-img.jpg"" > < img src= "masdefault.jpg" width= "100" height= "114px" /> < li> < a class = "cloud-zoom-gallery" href= "kostyum" title= "" rel= "useZoom: "loupe1", smallImage: "small-img.jpg"" > < img src= "kostyum.jpg" width= "100" height= "114px" />

По внешнему виду напоминает обычную галерею, созданную посредством маркированного списка. Также уже узнаются элементы плагина cloud-zoom с указанием некоторых его настроек. В этом случае необходимо обратить внимание на команду useZoom , который привязывает каждый элемент галереи к основному блоку для просмотра. Связь образовывается за счет соответствия идентификаторов. Помимо этого добавилась еще один параметр – smallImage , он в свою очередь определяет, какое именно изображение показать в уменьшенном формате. Стоит отметить, что для режима галереи необходимо наличие трех картинок: 2 которые будут взаимодействовать с плагином, и еще одна в уменьшенном варианте для создания списка иконок.

На практике этот пример будет выглядеть так

На заметку

Если для запуска галереи используется ajax, то плагин может не отработать. Чтобы исправить этот баг, необходимо прописать переинициализацию плагина. В стандартном виде это выглядит так

JavaScript

jQuery(".cloud-zoom, .cloud-zoom-gallery" ) . CloudZoom() ;

Подводя итог

В завершении хочется отметить простоту использования плагина и гибкость при внесении корректировок в оформление данного функционального элемента. Помимо этого радует высокий показатель кроссбраузерности и маленький объем скрипта – всего 6 килобайт. Отдельного внимания заслуживает поддержка режима галереи. Единственное, что немного смущает, что все настройки вносятся непосредственно в HTML-документ, это немного засоряет наш код. Более практичнее было бы вынести их во внешний js-файл. Ну а в целом плагин достоин внимания и признания.

Был рассмотрен плагин увеличения изображения 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 вариантов отображения. В дополнение его функциональности - это очень гибкий плагин, который может быть интегрирован в любой сайт.

Вебдизайн с jQuery - это очень просто! Zoomy - лупа для просмотра изображений

С помощью бесплатной библиотеки скриптов jQuery можно легко организовать просмотр увеличенных изображений. Кроме рассмотренных ранее фотогалерей, существуют и другие интересные разработки, позволяющие в деталях изучить фотографию или рисунок. Для этого обычно используют увеличение небольшой миниатюры-превьюшки при наведении на неё курсора, а также лупу, которую можно передвигать по изображению.

Для создания такой лупы можно использовать плагин Zoomy , разработанный Якобом Лоу (Jacob Lowe), руководителем дизайн-студии в Калифорнии. Этот плагин позволяет получить эффект увеличительного стекла (лупы) для картинок, чтобы можно было рассмотреть на них мелкие детали. Пример работы лупы показан на рисунке:

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

Ещё статьи по теме "Создание, оптимизация и раскрутка сайта":

3.5 из 5

Сегодня мы рассмотрим еще один полезный плагин jQuery — лупу (jQuery magnify tool).

Все, что вам нужно, это сделать 2 пропорциональные картинки (одну маленькую и одну нормальных размеров), html разметку и небольшой кусок javascript кода.

Как обычно, сначала посмотрим пример . А теперь поехали.

Протестировано

• Windows: IE 6, IE 7, FF 2+, Safari 3.1;
• Mac: FF 2+, Safari 3.1.

Замечания по использованию

• пропорции маленького и большого изображения должны быть одинаковыми — т. е. если маленькая картинка имеет размеры 300 на 400 пикселов, то оно имеет пропорции 3 на 4, следовательно большое изображение должно быть 900 на 1200, 1500 на 2000 и так далее;
• если у вас большая картинка очень тяжелая, то вы можете выключить прелоад картинки и отложить его до события, при котором включается лупа (наведение курсора или клик).

HTML

Итак, начинаем. Для начала посмотрим HTML код. Здесь все стандартно — подключаем jQuery , файл плагина и делаем разметку для картинки:

Лупа на jQuery



img {
border: 1px solid #CCC;
}

Лондонское метро

Карта лондонского метро довольно большая. Но теперь у нас есть лупа;-)

Дефолтные настройки

Немного модифицированные настройки

JavaScript

Первый раз вызовем лупу стандартным способом (при наведении курсора), без всяких дополнительных настроек.

$("#magnify1").magnify();

Теперь сделаем так, чтобы лупа вызывалась при клике и добавим несколько настроек.

$("#magnify2").magnify({

ShowEvent: "click",
hideEvent: "click",
lensWidth: 60,
lensHeight: 60,
stagePlacement: "right",
lensCss: { backgroundColor: "#cc0000",
border: "0px",
opacity: 0.5 },
stageCss: { border: "4px solid #33cc33" }

});

Таблица дополнительных параметровпараметр тип по умолчанию описание

lensWidth	integer	100	длина лупы
lensHeight	integer	100	высота лупы
showEvent	string	’’mouseover’’	событие, при котором появляется лупа
hideEvent	string	’’mouseout’’	событие, при котором исчезает лупа
stagePlacement	string	’’right’’	положение лупы относительно картинки, может быть справа (’’right’’) или слева (’’left’’)
preload	boolean	true	если стоит ’’true’’, скрипт загрузит большую картинку сразу после загрузки страницы; если ’’false’’ — после события вызова лупы
string	пустая строака	путь до индикатора загрузки; если пусто, то будет просто написано «Loading…»
stageCss	object	пустой объект	дополнительные стили для зоны увеличения на меленькой картинки
lensCss	object	пустой объект	дополнительные стили для лупы
onBeforeShow	function	пустая функция	функция, которая запускается до появления лупы
onAfterShow	function	пустая функция	функция, которая запускается после появления лупы
onBeforeHide	function	пустая функция	функция, которая запускается до скрытия лупы
onAfterHide	function	пустая функция	функция, которая запускается после скрытия лупы

Перекрытие select в IE 6

В шестом осле все селекты находятся выше (даже если вы будете менять z-index ). Для этого можно использовать вот такой маленький хак, который скрывает селект, находящийся под лупой, до ее появления и показывает его при скрытие лупы.