Від автора: Сьогодні ми розглянемо jQuery плагін cloud-zoom (лупа для картинок). За допомогою нього на сторінці можна переглядати зображення у збільшеному вигляді.

Чому саме він?

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

Перед тим, як ми приступимо до практичних кроків, я Вам рекомендую переглянути демо-результат роботи.

Також завантажте вихідні коди собі на комп’ютер!

Перейдемо до розгляду уроку.

Створіть папку folder і помістіть в неї файл index.html з таким кодом:

Плагін jQuery cloud-zoom

Режим «Фотогалерея»

Режим «всередині»

Режим «розмиття»

Режим «Колір»

Після цього в папці folder створіть папку styles і помістіть в неї файл cloud-zoom.css. Він повинен містити наступний код:

img{
border: none
}
h1{
margin: 50px 0 50px 0;
}.cloud-zoom{
width: 200px;
}
.cloud-zoom lens {
border: 4px solid #888;
margin: -4px;
background-color: #fff;
cursor: move;
}
.cloud-zoom-title {
font-family: Arial, Helvetica, sans-serif;
position: absolute !important;
background-color: #000;
color: #fff;
padding: 3px;
width: 100%;
text-align: center;
font-weight: bold;
font-size: 10px;
}
.cloud-zoom-big {
border: 4px solid #ccc;
overflow: hidden;
}
.cloud-zoom-loading {
background:#222;
padding:3px;
border:1px solid #000;
}

Тепер залишилося підключити ява-скрипт. Для цього в папці folder створіть папку js і помістіть в неї два файлу jquery-1.4.2.js і cloud-zoom.1.0.2.min.js.

Після виконання всіх вищезазначених дій у вікні Вашого браузера можна буде побачити наступне:

Як Ви вже, напевно, зрозуміли, даний плагін передбачає кілька режимів збільшеного зображення. Щоб побачити ефект збільшення зображення певного режиму, Вам необхідно просто навести курсор миші на зображення.

У випадку режиму «Фотогалерея» існує вибір зображення зі списку для перегляду в збільшеному вигляді.

У кожного режиму є свої особливості.

Наприклад, для того щоб задати режим «Фотогалерея», об’єкту необхідно обов’язково призначити клас «cloud-zoom-gallery» і передати наступні параметри rel : useZoom: ‘zoom1’, smallImage: ‘картинка.јрд’.

Аналогічно для режиму «Всередині»:

режиму «Розмиття»:

режиму «Колір»:

Урок закінчено. Всім дякую за увагу.

Висновок.

У даному уроці було розглянуто jQuery плагін cloud-zoom(в народі – «лупа «).

Особливістю даного плагіна є те, що у нього є кілька режимів перегляду зображення у збільшеному вигляді. Ви легко можете вибрати потрібний Вам режим за смаком.

Хотів би також виділити достоїнства цього плагіна:

E-mail: [email protected]