Jquery збільшення картинки

Відео: Простий скрипт збільшення картинки

На просторах інтернету я знайшов одну дуже цікаву і корисну jQuery бібліотеку для збільшення картинки. Як виглядає робота цього скрипта: Ви просто наводите на зображення і ту ділянку, на якій знаходиться лупа показується в збільшеному розмірі. Установка і настройка плагіна дуже проста і у Вас не повинно виникнути ніяких проблем.

Погляньте на реальний приклад jQuery збільшення картинки:

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

Ось як виглядає це збільшення:

Відео: Збільшення зображень на сайті WordPress у вигляді спливаючих картинок Плагін WP jQuery Lightbox

Як встановити jQuery збільшення картинки

HTML частина

Підключаємо бібліотеку jQuery і плагін okzoom.js (тут, або беремо з прикладу) перед закриває тегом:

12

lt;script src="Http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"gt; lt;/scriptgt;lt;script src="Js / okzoom.js"gt; lt;/scriptgt;

Зараз потрібно розмістити зображення, яке будемо збільшувати. Я до Нового Року малював в Photoshop оленів і Санта Клауса. Ось з цим зображенням я і буду експериментувати. Вставляємо десь між тегами і наше зображення, але задаючи йому висоту менше ніж у оригіналу:

1

lt;img id="Example" height="200" src="Demo.jpg"gt;

Я задав 200 пікселів висоту, хоча оригінальна висота 280. Це зроблено спеціально, тому що при збільшенні буде показуватися оригінальне зображення. Також потрібно задати унікальний ідентифікатор зображення, яке ми будемо збільшувати. У моєму випадку це id = "example". Залишилося останнє дію.

jQuery частина

Потім перед закриває тегом вставляємо наступний код:

12345678910

lt;scriptgt; $ (function () {$ ( `# example`). okzoom ({width: 200, height: 200, border: "1px solid black", shadow: "0 0 5px # 000"}) -}) -lt;/scriptgt;

Хочу зробити невеликі пояснення:

• #example - це і є той ідентифікатор, який ми писали у тега .
• width - ширина лупи в пікселях.
• height - висота лупи в пікселях.
• border - колір і вид кордону лупи.
• shadow - тінь від лупи.

висновок

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

Успіхів!