Главная > Руководства, Скрипты и коды > Гид по изображению на jQuery
Гид по изображению на jQuery7 октября 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/ Структура HTML Что касается структуры HTML, у нас будет основной контейнер, а каждое изображение будет внутри div’а с классом zt-item:
– это изображение на каждом этапе. Далее у каждого элемента будут теги с конкретными атрибутами.Атрибуты данных будут следующими: * 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. Расположение тегов определено в атрибутах стиля, и вы также можете задать другой размер. Опции Опции по умолчанию будут следующими:
Мы надеемся, что вам понравился данный скрипт и вы найдете ему применение в своих проектах! Смотреть демо | Скачать архивом Внимание! У вас нет прав для просмотра скрытого текста.
Вернуться назад |