—»     —»   Неплохие эффекты увеличения с elevateZoom для jQuery
  Раздел: Скрипты и коды   Комментариев: 1  

Неплохие эффекты увеличения с elevateZoom для jQuery



Онлайн-магазины точно пользуются этими эффектами! Лично нам очень нравятся изображения продукции на Amazon. При наведении на картинку курсором мыши, перед вами появляется увеличенная версия картинки. Если вам нравится такой подход, то наверняка вы когда-нибудь хотели реализовать нечто подобное на собственном сайте. jQuery-плагин elevateZoom обещает вам помочь в этом деле. Его даже можно оформить различными эффектами.

Неплохие эффекты увеличения с elevateZoom для jQuery

Один элемент img, два изображения и jQuery

Чтобы превратить elevateZoom, разработанный уэльским веб-агентством Elevate, в эффект, вам сначала нужно будет встроить jQuery и javascript, как обычно, в головную секцию вашего HTML-документа. Как только вы сделаете этого, плагин можно будет применять к любому элементу img. Большая версия изображений, которая необходима для эффекта увеличения, запускается при помощи атрибута data, добавленного к элементу img:

<img id="pic" src="pic_normal.jpg" data-zoom-image="pic_for_zoom.jpg" />

Следующий jQuery-запрос применяет эффект elevateZoom к изображению:

$("#bild").elevateZoom();

Этой строки кода javascript будет достаточно для получения эффекта увеличения на изображении. Наведение курсора мыши на изображение отображает увеличенную часть сразу поверх оригинала. Внутри исходного изображения есть прямоугольная рамка, которая определяет, какой отрезок изображения нужно отображать в увеличенном виде.

Неплохие эффекты увеличения с elevateZoom для jQuery

Определяем позицию увеличенного сегмента

Опция zoomWindowPosition используется для расположения окна увеличения. Нам доступны 16 разных точек привязки:

$("#pic").elevateZoom({
zoomWindowPosition: 6
});

В нашем примере мы выбрали позицию 6, которая привяжет окно увеличения по центру прямо под исходным изображением. Если вас не устраивают предусмотренные точки привязки, вы можете выбрать отдельный div в качестве цели увеличения. Расположение свободно определяется при помощи CSS.

В качестве третьего варианта, вы можете полностью отказаться от использования отдельного окна увеличения. Это приведет к тому, что область увеличения будет отображаться прямо внутри исходного изображения (внутреннее увеличение):

$("#pic").elevateZoom({
zoomType: "inner"
});

Классическое масштабирование при помощи увеличительного стекла

Кроме стандартной квадратной области увеличения, вы также можете использовать эффект увеличительного стекла:

$("#pic").elevateZoom({
zoomType: "lens",
lensShape: "round",
lensSize : 200
});

Размер и форма линзы изменяется.

Неплохие эффекты увеличения с elevateZoom для jQuery

elevateZoom также имеет и другие опции настройки. Здесь есть эффекты появления и затухания, а также эффект сглаживания для управления движением внутри области увеличения.

Завершение

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

Ключевые тэги: jQuery
Опубликовал Design FactoRy   Прочитано (раз): 8012   |   Оставлено комментариев: 1
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 29 апреля 2013 @ 16:01
Написал: deeserge — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Попробуйте еще этот бесплатный jQuery плагин увеличения изображения с эффектом лупы http://zoomsl.tw1.ru. Похож на Cloud Zoom v3.0. Работает во всех браузерах, даже в ие8 поддерживается плавность анимации, чего не скажешь про другие бесплатные плагины.
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

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

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


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


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Июль 2017    »
ПнВтСрЧтПтСбВс
 12
3456789
10111213141516
17181920212223
24252627282930
31