Гид по изображению на jQuery

Сегодня мы хотим поделиться с вами небольшим скриптиком для масштабирования изображения. Изначально отображая цельную веб-страницу, нам нужно выделить некоторые элементы изображения, кликая по соответствующим тегам. Для того чтобы реализовать это, нам понадобится еще одно изображение, большее в размерах. Данный этап может содержать и другие теги, которые позволят нам, например, отобразить больше изображений. Мы добиваемся эффекта увеличения путем увеличения текущего изображения и перехода к новому.

Изображения, использованные в примере, можно найти здесь:

image1: City Crowd
image1_5: Office
image2: Ikea Room
image3_n: Portimao Marina
Фоновая текстура от http://www.blunia.com/ на http://subtlepatterns.com/


Структура HTML

Что касается структуры HTML, у нас будет основной контейнер, а каждое изображение будет внутри div’а с классом zt-item:

<div id="zt-container" class="zt-container">
    <div class="zt-item" data-id="zt-item-1">
        <img class="zt-current" src="images/image1.jpg" />
        <div class="zt-tag" data-dir="1" data-link="zt-item-2" data-zoom="5" data-speed="700" data-delay="50" style="top:138px;left:151px;"></div>
        <div class="zt-tag" data-dir="1" data-link="zt-item-3" data-zoom="6" data-speed="700" data-delay="50" style="top:253px;left:520px;"></div>
    </div>
    <div class="zt-item" data-id="zt-item-2">
        <img class="zt-current" src="images/image1_1.jpg" />
        <div class="zt-tag zt-tag-back" data-dir="-1" data-link="zt-item-1" data-zoom="5" data-speed="500" data-delay="0"></div>
    </div>
    <div class="zt-item" data-id="zt-item-3">
        <img class="zt-current" src="images/image2_2.jpg" />
        <div class="zt-tag zt-tag-back" data-dir="-1" data-link="zt-item-1" data-zoom="6" data-speed="500" data-delay="0"></div>
    </div>
</div>

<img class="zt-current" src="images/imageX.jpg" />

– это изображение на каждом этапе. Далее у каждого элемента будут теги с конкретными атрибутами.

Атрибуты данных будут следующими:

* data-dir может быть как 1, так и -1, в зависимости от того, когда нам надо увеличить изображение или уменьшить.
* data-link будет указывать на то, к какому элементу мы подключаем тег (основываясь на data-id, который мы задаем каждому элементу)
* data-zoom – фактор увеличения. Если установить небольшое значение, то изображение будет увеличиваться совсем малость.
* data-speed – скорость анимации в миллисекундах.
* data-delay – задержка перед появлением нового изображения.

Структура примера, приведенного выше, подкреплена исходным изображением (zt-item-1) с двумя тегами, которые ведут к zt-item-2 и zt-item-3. zt-item-2 и zt-item-3 обозначены лишь тэгом возврата. Как видно, тег возврата имеет другой класс – zt-tag-back, а параметру data-dir выставлено значение в -1.

Расположение тегов определено в атрибутах стиля, и вы также можете задать другой размер.

Опции

Опции по умолчанию будут следующими:

$('#zt-container').zoomtour({
    // if true the tags are rotated depending on their position
    rotation        : true,
    // zoom out animation easing. Example: easeOutBounce , easeOutBack
    zoominEasing    : '',
    // zoom out animation easing
    zoomoutEasing    : ''
});

Мы надеемся, что вам понравился данный скрипт и вы найдете ему применение в своих проектах!

Смотреть демо | Скачать архивом