Совсем недавно я писал статью на тему добавления эффекта лупы при наведении на изображение, и вот как раз наткнулся на ещё одно решение, которое можно смело добавлять себе в портфель инструментов веб-разработчика. Рассматривать мы будем 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 – с восьмой версии.