jQuery плагін для збільшення зображень

38

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

Плагин увеличения изображений

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

Дивитися >Демо

Розмітка HTML

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

<a href="large.jpg"><img src="images/small.jpg" alt="Small image" /></a>

Small image

Як не дивно, але це все, іншу роботу по висновку і оформлення збільшеної картинки ми покладемо на стилі css, бібліотеки javascript і безпосередньо сам плагін jQuery, який знайдете в исходниках. У початок документа html, розділ між тегами або перед закриваючим тегом , залишається помістити наступне:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js">
<script type="text/javascript" src="easyzoom.js">
<script type="text/javascript">
jQuery(function($){
$('a.zoom').easyZoom();
});

jQuery(function($){
$(‘a.zoom’).easyZoom();
});

CSS

З точки зору оформлення плагіна через css все, що вам потрібно зробити, це визначити розмір елемента зображення), тільки що створеного zoom-плагіном, а так само його місце розташування і зовнішній вигляд. У прикладі я використовував такі параметри:

#easy_zoom{
 width:600px;
height:400px;
border:5px solid #eee;
 background:#fff;
 color:#333;
 position:absolute;
top:15px;
left:400px;
overflow:hidden;
-moz-box-shadow:0 0 10px #555;
 -webkit-box-shadow:0 0 10px #555;
 box-shadow:0 0 10px #555;
 /* вертикальне і горизонтальне вирівнювання тексту попередньо завантажувати */
line-height:400px;
text-align:center;
}

#easy_zoom{
width:600px;
height:400px;
border:5px solid #eee;
background:#fff;
color:#333;
position:absolute;
top:15px;
left:400px;
overflow:hidden;
-moz-box-shadow:0 0 10px #555;
-webkit-box-shadow:0 0 10px #555;
box-shadow:0 0 10px #555;
/* вертикальне і горизонтальне вирівнювання тексту попередньо завантажувати */
line-height:400px;
text-align:center;
}

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

ДемоСкачать

На цьому все, думаю треба постаратися, щоб помилитися, або накосячілі організовуючи роботу плагіна у себе на сайті, так що все у вас вийде, а якщо не котить раптом, пишіть в коментах, разом розберемо будь-яку проблему :)).

Джерело: Css Globe

З Повагою, Андрій .

Буду всім вдячний, якщо підтримайте проект — додавши блог виключення AdBlock та поділіться посиланням на запис в своїх соціальних мережах: