Изображения, использованные в примере, можно найти здесь:
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 : ''
});
Мы надеемся, что вам понравился данный скрипт и вы найдете ему применение в своих проектах!
Смотреть демо | Скачать архивом
Внимание! У вас нет прав для просмотра скрытого текста.