—»     —»   Гид по изображению на jQuery
  Раздел: Руководства, Скрипты и коды   Комментариев: 4  

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



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

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

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 : ''
});

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

Смотреть демо | Скачать архивом
Внимание! У вас нет прав для просмотра скрытого текста.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: jQuery, фотография, презентации
Опубликовал Design FactoRy   Прочитано (раз): 5848   |   Оставлено комментариев: 4
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 7 октября 2011 @ 19:46
Написал: fortune — группа: Читатели  
На сайте с: 19.11.2009   |   Публикаций: 0   |   Комментариев: 59
ICQ: 190783170
классный скриптец! реализацию подобного эффекта раньше только во флеше видел!


--------------------
я дизайнер - http://imdesigner.ru
Комментарий #2: 7 октября 2011 @ 20:54
Написал: Design FactoRy — группа: Администраторы  
На сайте с: 21.07.2009   |   Публикаций: 3304   |   Комментариев: 500
ICQ: --- не указано ---
fortune, в закромах у нас еще много интересного laughing
Комментарий #3: 24 ноября 2011 @ 16:41
Написал: Sergius — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Интересная штука. Надо бы применить :)
Комментарий #4: 17 февраля 2012 @ 07:29
Написал: senator3821 — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Спасибо сайту, за хорошую и бесплатную информацию, особое спасибо за указанные примеры изображений (очень пригодилось)
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц December по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации

















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Сентябрь 2019    »
ПнВтСрЧтПтСбВс
 1
2345678
9101112131415
16171819202122
23242526272829
30