Ефект лупи jquery. Веб-дизайн і пошукова оптимізація

плагін 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.

Ініціалізіруем плагін:

Ось власне і все.

А тепер докладніше

При ініціалізації, можна передавати такі параметри:

Параметри zoomy ()

події

Можна налаштовувати включення лупи в залежності від дій користувача. Доступні чотири події:

Приклади ініціалізації з параметрами

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

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, Що імітує реальну лупу. У деяких випадках його використання незручно, так як лупа перекриває основну картинку і ускладнює фокусування на потрібній ділянці. Для точного позиціонування точки збільшення можна використовувати інший варіант лупи - 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 \u003d "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-редакторі або в Блокноті. На самому початку файлу є рядки з доступними налаштуваннями, які можна змінювати:

Наприклад, для показаного вгорі статті варіанти каплевидной лупи (зліва) використано стандартні установки, а для правого малюнка наступні:
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

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

У статті розглянута процедура установки плагіна 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-файл. Ну а в цілому плагін вартий уваги і визнання.