Показать Меню
falbar Плагин SergeLand Image Zoomer

Плагин SergeLand Image Zoomer – увеличение картинок

Плагин SergeLand Image Zoomer

Совсем недавно я писал статью на тему добавления эффекта лупы при наведении на изображение, и вот как раз наткнулся на ещё одно решение, которое можно смело добавлять себе в портфель инструментов веб-разработчика. Рассматривать мы будем jQuery плагин под названием SergeLand Image Zoomer 3-ей версии. Это решение с богатым функционалом и подробной документацией, так как разработчик его русскоязычный - все настройки описаны подробно и понятным языком на официальном сайте, там же можно найти и примеры его использования.

Работая с SergeLand Image Zoomer можно сказать, что это универсальное решение, вследствие чего обладает не малым размером. При помощи его можно не только реализовать эффект лупы, но и добавить мини галерейку с эффектами увеличения картинок при наведении на изображение. Из демо материалов видно, что данный плагин идеально подойдёт для интернет магазинов одежды и аксессуаров, где не всегда все понятно на общем фото и хочется рассмотреть детали поближе. Указав нужные параметры в настройках скрипта, легко добавляется возможность зуммирования при прокрутке колёсика мыши. В общем, очень гибкое решение для различных проектов. Большой и жирный плюс, который я хочу отметить у этого плагина - это наличие расширений для интеграции на CMS: Joomla, Webasyst и WordPress с инструкцией.

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

В этой статье мы рассмотрим три примера, работу которых Вы можете увидеть на странице «демо». Первым делом подключаем сам скрипт и jQuery библиотеку:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/zoomsl.min.js" type="text/javascript"></script>

И так, добавляем для первого примера HTML разметку:

<img src="img/pr1.jpg" data-large="img/pr1-big.jpg" data-text-bottom="Описание к картинке" title="image" class="pr1" />
  • data-large – путь до изображения с большим расширением (не обязателен);
  • data-text-bottom – описание показываемое с низу картинки (не обязателен).

Далее вызываем сам скрипт (все скрипты будем запускать после загрузки документа):

$(".pr1").imagezoomsl({
	zoomrange: [4, 4]
});
  • zoomrange – диапазон увеличения (от 1 до бесконечности).

Переходим ко второму примеру и добавляем для него разметку:

<img src="img/pr2.jpg" data-large="img/pr2-big.jpg" data-text-bottom="Описание к картинке" title="image" class="pr2" />

И также вызываем для него плагин:

$(".pr2").imagezoomsl({
	zoomrange: [1, 5],
	cursorshadeborder: "7px solid #0a0a0a",
	magnifiereffectanimate: "fadeIn",
	magnifierpos: "left"
});
  • cursorshadeborder – бордюр для курсора;
  • magnifiereffectanimate – анимация появления скрытого контейнера (fadeIn, showIn, slideIn);
  • magnifierpos – в этом свойстве указывается сторона, с какой нужно отображать скрытый контейнер (left, right).

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

<img src="img/pr3.jpg" data-large="img/pr3-big.jpg" title="image" class="pr3" />

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

.round-loupe{
	border-radius: 75px;
	border: 6px solid #a6b3bf;
}

Вызываем скрипт:

$(".pr3").imagezoomsl({
	innerzoommagnifier: true,
	classmagnifier: "round-loupe",
	magnifierborder: "6px solid #a6b3bf",
	zoomrange: [3, 3],
	magnifiersize: [150, 150]
});
  • innerzoommagnifier – включает режим линзы;
  • classmagnifier – тут указывается имя класса добавляемого к скрытому контейнеру;
  • magnifiersize – в этом свойстве задается высота и ширина контейнера в px.

Это только малая доля настроек SergeLand Image Zoomer (ссылка на оф. сайт в конце статьи), но уже можно увидеть неплохие варианты его использования. Важный момент касается поддержки: плагин хорошо поддерживается всеми современными браузерами, а касательно IE – с восьмой версии.

Источник
sergeland.ru

Подписаться на обновления

Комментариев еще не оставлено