Від автора: Сьогодні ми розглянемо 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(в народі – “лупа “).
Особливістю даного плагіна є те, що у нього є кілька режимів перегляду зображення у збільшеному вигляді. Ви легко можете вибрати потрібний Вам режим за смаком.
Хотів би також виділити достоїнства цього плагіна:
розмір скрипта (близько 6 Кб).
легка інтеграція в код.
E-mail: [email protected]