Главная > Руководства, Скрипты и коды > Гид по изображению на jQuery

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


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

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

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

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

Структура 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 : ''
});

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

Смотреть демо | Скачать архивом
Внимание! У вас нет прав для просмотра скрытого текста.

Вернуться назад