Плавне збільшення зображень

У цьому уроці ми розглянемо дуже корисну бібліотеку javascript, яка дозволяє плавно збільшувати зображення. Наприклад, коли людина дивиться якусь річ в інтернет-магазині, то, як правило, він максимально збільшує зображення, щоб розгледіти товар, який він хоче придбати. І тільки після цього він здійснює покупку. Зробити зображення з дуже великою роздільною здатністю - не найкращий вихід. Тому що в цьому випадку зображення будуть займати багато місця. Більш простим рішенням буде створити зображення масштабується. Це і можна зробити за допомогою цієї бібліотеки.

Коли будете дивитися приклад, то зображення можуть довго завантажуватися. В цьому випадку я раджу вам завантажити приклад собі на комп`ютер, і вже дивитися з комп`ютера:

дивитися прімерСкачать

Бібліотека, яку ми будемо використовувати, знаходиться тут - Zoomer (скачати).

Як зробити плавне збільшення зображень у себе на сайті?

HTML

Підключаємо між тегами і дві бібліотеки і стилі для нашого плагіна (jQuery, jquery.fs.zoomer.js і jquery.fs.zoomer.css):

123

lt;script src="Http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"gt; lt;/scriptgt;lt;link rel="Stylesheet" type="Text / css" href="Css / jquery.fs.zoomer.css" /gt;lt;script src="Js / jquery.fs.zoomer.js"gt; lt;/scriptgt;

Увага: jQuery бібліотека повинна бути підключена першої !!!

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

123

lt;div class="Zoomable"gt;lt;img src="Images / priroda.jpg" alt="Красиві гори"/gt;lt;/divgt;

Ми створили блок з класом zoomable і розмістили одне зображення за допомогою тега . Для того щоб створити галерею з декількох зображень, тоді необхідно розмістити кілька зображень поспіль. Як на прикладі нижче:

12345

lt;div class="Zoomable"gt;lt;img src="Images / priroda.jpg" alt="Красиві гори"/gt;lt;img src="Images / priroda-2.jpg" alt="Захід"/gt;lt;img src="Images / priroda-0.jpg" alt="УУххх"/gt;lt;/divgt;

CSS

Зверніть увагу на зображення jquery.fs.zoomer-loading.jpg, яке знаходиться в теці images. Воно необхідне для того, щоб показувати індикатор завантаження перед тим як зображення повністю завантажиться.

Тому в файлі jquery.fs.zoomer.css до 22 рядку необхідно вказати ПРАВИЛЬНИЙ шлях до цього зображення.

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

Ви повинні задати тут розміри блоку, які приблизно пропорційні розмірам ваших зображень:

12345

.zoomable {height: 500px-width: 800px-margin:10px auto-}

jQuery

Зараз наша галерея ще не працює. Для того щоб вона почала функціонувати з можливістю змінювати масштаб зображень, слід прописати між тегами і:

12345

lt;scriptgt; $ (document) .ready (function () {$ ( ". zoomable"). zoomer () -}) -lt;/scriptgt;

Що ми зробили? У першому рядку ми вказали, що необхідно виконати функцію zoomer ()(Яка знаходиться у другому рядку), коли сторінка завантажитися.

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

Для того щоб задати довільний стиль для блоку в якому знаходяться зображення (на прикладі він сірий), необхідно прописати властивість customClass всередині функції zoomer () із зазначенням нового класу:

1234567

lt;scriptgt; $ (document) .ready (function () {$ ( ". zoomable"). zoomer ({customClass: "custom" // вказуємо назву класу в лапках}) -}) -lt;/scriptgt;

Відео: Плавне збільшення зображень

Я задав ось такий стиль для класу custom:

1234

.custom {border:2px dashed # F3696D- / * Пунктирна рожева межа * /background-color:# F3CECF- / * Блідо-рожевий колір фону * /}

Блок буде виглядати наступним чином (пунктирна межа і рожевий фон):

Ще одним корисним властивістю є вказівка инкремента, за допомогою якого відбувається масштабування зображення. Його можна збільшувати і зменшувати, і відповідно масштабування буде відбуватися швидко або повільно. Здається він так:

Відео: 19 урок Ефект лінзи. Збільшення і наближення частини зображення в Adobe Premiere Pro

1234567

lt;scriptgt; $ (document) .ready (function () {$ ( ". zoomable"). zoomer ({increment: 0.0005}) -}) -lt;/scriptgt;

Якщо ви задасте параметр як у мене (тобто 0.0005), тоді ви помітите що масштабування відбувається дуже повільно і доводиться натискати на кнопку з мінусом або плюсом. Пограйте з цим параметром і виберіть найбільш зручний для вас.

висновок

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

Успіхів!

З повагою, Юрій Німець

Відео: Збільшення зображення при наведенні