О сайтеПравилаКонтакты
  • Крипто
  • Новости
  • Статьи
  • Люди
  • Теги
» Статьи » Разработка » Плагин SergeLand Image Zoomer – увеличение картинок
  • Инструменты
  • Заработок
  • Раскрутка
18 марта 2016 . Антон Кулешов

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

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

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

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

jQuery плагин Loupe;

jQuery плагин Okzoom.

В этой статье мы рассмотрим три примера, работу которых вы можете увидеть на странице «демо». Первым делом подключаем сам скрипт и 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/pr1.jpg" data-large="img/pr1-big.jpg" data-text-bottom="Описание к картинке" title="image" class="pr1" />

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

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

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

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

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

.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 – с восьмой версии.

#Лупы
10 484
Антон Кулешов
Увеличение картинки с помощью эффекта лупы на jQuery Э-Зум, зум, зум-м-м! Ну, или как мы картинки увеличивали Эффект лупы при помощи jQuery плагина
Комментарии не найдены

Авто эффект печатания текста

Оригинальный lightbox на jQuery

Популярное
1 Пишем парсер контента на PHP2 Лучший способ прижать футер используя flexbox3 Кликджекинг как соцфишинг, пишем скрипт для получения id пользователя вконтакте4 Пишем первый модуль для 1С-Битрикс с использованием ядра D75 Делаем подгрузку контента при прокрутке страницы
Обратите внимание