Zoom — Збільшення Зображення з jQuery

59

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

Сьогодні я покажу Вам, як створити простий ефект зума з допомогою jQuery.

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

Zoom-эффект для фото

ДемоИсходники

Приклад подивилися, тепер поїхали!!!

Розмітка HTML

Щоб все справно працювало необхідно підключити JQuery, script масштабування і стилі оформлення CSS безпосередньо до сторінки html:

 <link rel="stylesheet" href="nivo-zoom.css" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript">
<script src="jquery.nivo.zoom.pack.js" type="text/javascript">

Для правильної роботи ефекту нам треба обернути мініатюрне зображення в посилання, що вказує на зображення, яке ви хочете, щоб збільшувалася», та присвоїти ссылке клас «nivoZoom».

<a href="images/pic_large.jpg" class="nivoZoom">
<img src="images/pic.jpg" alt="" width="165"/>
</a>

Крім цього, ви можете додати додаткові значення до класу, щоб зображення збільшувалася по-іншому. Наприклад з класом «nivoZoom center» збільшене фото буде виводитися відповідно по центру. Ви також можете додати підпис до збільшеному зображенню, додавши Div з класом «nivoCaption».

<a href="images/pic_large.jpg" class="nivoZoom center">
<img src="images/pic.jpg" alt="" width="165"/>
<div class="nivoCaption">Це приклад підпис до зображення.</div>
</a>

Це приклад підпис до зображення.

Для зміни збільшення картинки використовуються наступні класи:

  • topLeft (за замовчуванням)
  • topRight
  • bottomLeft
  • bottomRight
  • center

Приваблює в цьому ефекті те, що мініатюр Ви зможете поставити практично будь-який розмір, змінюючи значення параметра width=”###”, в нашому випадку-я встановив ширину 165px.
Правда, не варто забувати, що якість втрачається при перевищенні розмірів вихідного зображення.

CSS

З оформленням нашого ефекту через стиль, справи йдуть ще простіше. В исходниках є файл стилів nivo-zoom.css, наступного змісту

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.nivoZoomHover {
position:absolute;
top:0px;
left:0px;
z-index:9;
width:100%;
height:100%;
cursor:pointer;
}
.nivoCaption {
display:none;
position:absolute;
z-index:110;
text-align:center;
background:#010101;
color:#fff;
padding:4px 0;
overflow:hidden;
}

.nivoZoomHover {
position:absolute;
top:0px;
left:0px;
z-index:9;
width:100%;
height:100%;
cursor:pointer;
}
.nivoCaption {
display:none;
position:absolute;
z-index:110;
text-align:center;
background:#010101;
color:#fff;
padding:4px 0;
overflow:hidden;
}

Обгортка для посилання і зображення буде абсолютно позиціонована. З підписом теж думаю мудрувати не доведеться, ну хіба тільки кому захочеться змінити фон і колір виведеного тексту, код гранично малий і зрозумілий.

Фінальним акордом усього дійства, підключення до нашого документу, маленького скрипта використовує функцію завантаження вікна $(window).load () :

<script type="text/javascript">
$(window).load(function() {
$('body').nivoZoom();
});

$(window).load(function() {
$(‘body’).nivoZoom();
});

Zoom — ефект має багато можливостей для налаштувань. Нижче наведено приклад коду, настройки за допомогою всіх наявних варіантів і їх значення за замовчуванням, з невеликими поясненнями :

<script type="text/javascript">
$(window).load(function() {
$('body').nivoZoom({
speed:500, // Швидкість збільшення
zoomHoverOpacity:0.8, // прозорість збільшеного фото
overlay:false, // накладення відсутній
overlayColor:'#333', // колір накладання на картинку
overlayOpacity:0.5, // прозорість накладення
captionOpacity:0.8 // Прозорість підпису
});
});

$(window).load(function() {
$(‘body’).nivoZoom({
speed:500, // Швидкість збільшення
zoomHoverOpacity:0.8, // прозорість збільшеного фото
overlay:false, // накладення відсутній
overlayColor:’#333′, // колір накладання на картинку
overlayOpacity:0.5, // прозорість накладення
captionOpacity:0.8 // Прозорість підпису
});
});

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

ДемоИсходники

Джерело, як це найчастіше й буває, тлумачні буржуїни: nivozoom.dev7studios.com
Підготував і адаптував для нашого брата: Shurawi