SergeLand Image Zoomer v3.0

. . . бесплатный jQuery плагин зуммирования изображения с эффектом лупы.

Поддержка всех современных браузеров

Плавность анимации в браузере IE8

Простота организация галереи

Расширенный функционал с возможностью тонкой настройки

Возможность задавать свои css классы для изменения внешнего вида

Меню

Главная

О нас

Примеры

Документация

Контакты

...

» Как поблагодарить

» Лицензия

» Интеграция с CMS

» Нас знают...

Главная

О нас

Примеры

Документация

Контакты

...

Как поблагодарить

Лицензия

Интеграция с CMS

Нас знают...

Commercial license: freeNew!

Personal license: free

Download zoomsl-3.0.js Download zoomsl-3.0.min.js
FF2+ IE8+ Opr9+ Chr1+ Saf2+

Нас так же ищут по следующим запросам: jQuery плагин увеличения изображения, картинки, фото, скачать плагин бесплатно, jquery image zoom plugin, скрипт увеличения картинки, увеличительная лупа Cloud Zoom, jquery Лупа, javascript изображение, script free, сайт plugin, jquery zoomer, jquery photo zoom, image jquery plugin, jquery img zoom, jquery image zoom, jquery image zoom plugin free, jquery image resize plugin, image zoom script, image zoom javascript, javascript, free, download wordpress, joomla, drupal, zoomer, зуммер, фото зумер, зум, jQuery

Быстрый старт

<!-- HTML -->

<head>
<script src="/js/jquery-1.8.2.min.js"></script>
<script src="/js/zoomsl-3.0.min.js"></script>
</head>
<body>
<img class="my-foto" src="/images/image1-small.jpg" data-large="/images/image1-big.jpg" title="Фото1">
<img class="my-foto" src="/images/image2-small.jpg" data-large="/images/image2-big.jpg" title="Фото2">
<img class="my-foto" src="/images/image3-small.jpg" data-large="/images/image3-big.jpg" title="Фото3">
</body>

<!-- JAVASCRIPT -->

<!-- Инициализация плагина без параметров настройки -->
<script>
jQuery(function(){
$(".my-foto").imagezoomsl();
});
</script>

или

<!-- JAVASCRIPT -->

<!-- Инициализация плагина с параметрами настройки -->
<script>
jQuery(function(){
$(".my-foto").imagezoomsl({

// параметр1: значение1,
// параметр2: значение2,

// ...

// параметрN: значениеM
});
});
</script>

Пример создания галереи

<!-- HTML -->

// контейнер-картинка
<img class="my-foto-container" src="/images/image1-small.jpg" data-large="/images/image1-big.jpg"
title="Фото">

// превью-картинки
<img class="my-foto" src="/images/image1-small.jpg" data-large="/images/image1-big.jpg" title="Фото1">
<img class="my-foto" src="/images/image2-small.jpg" data-large="/images/image2-big.jpg" title="Фото2">
<img class="my-foto" src="/images/image3-small.jpg" data-large="/images/image3-big.jpg" title="Фото3">

<!-- JAVASCRIPT -->

<script>
jQuery(function(){

//вешаем плагин на контейнер-картинку
$(".my-foto-container").imagezoomsl();

//клик по превью-картинке
$(".my-foto").click(function(){

var that = this;

//копируем атрибуты из превью-картинки в контейнер-картинку
$(".my-foto-container").fadeOut(600, function(){

$(this).attr("src", $(that).attr("src")) // путь до small картинки
.attr("data-large", $(that).attr("data-large")) // путь до big картинки

//дополнительные атрибуты, если есть
//.attr("data-title", $(that).attr("data-title")) // заголовок подсказки
//.attr("data-help", $(that).attr("data-help")) // текст подсказки
//.attr("data-text-bottom", $(that).attr("data-text-bottom")) // текст снизу картинки

.fadeIn(1000);
});
});
});
</script>

Атрибуты html тега <IMG>

Атрибут | Описание

data-large

Путь до big картинки. Если не указан или пустое значение, берется small картинка в качестве big.
Не обязательный параметр.

data-title

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

data-help

Текст подсказки. Если не указан или пустое значение, не выводится.
Не обязательный параметр.

data-text-bottom

Текст к картинке, показывается снизу big контейнера. Если не указан или пустое значение, не выводится.
Не обязательный параметр.

Параметры настройки плагина

Параметр | По умолчанию | Описание

Загрузка big картинки

loadinggif | data: image/gif | путь до картинки показываемой при загрузке big изображения
loadopacity | 0.1 | прозрачность фона перекрытия зуммируемой картинки при загрузке big изображения, принимает значения в диапазоне 0-1
loadbackground | #878787 | цвет фона перекрытия зуммируемой картинки при загрузке big изображения в формате CSS

Область курсора

cursorshade | true | показывает область курсора
magnifycursor | crosshair | вид курсора мыши над small картинкой в формате CSS
cursorshadecolor | #fff | цвет области курсора в формате CSS
cursorshadeopacity | 0.3 | прозрачность области курсора, принимает значения в диапазоне 0-1
cursorshadeborder | 1px solid black | внешний бордюр области курсора в формате CSS
stepzoom | 0.5 | шаг зуммирования при прокрутке колеса мыши, принимает значения в диапазоне 0- ∞
zoomrange | [2, 2] | диапазон зуммирования - [начало, конец], принимает целые и дробные значения в диапазоне 1- ∞
zoomstart | 2 | стартовая установка зуммирования, если zoomstart < zoomrange[начало], то плагин установит zoomstart = zoomrange[начало]
disablewheel | true | отключает прокрутку документа колесиком мыши когда курсор над small картинкой, если не задан диапазон зуммирования, или zoomrange[начало] == zoomrange[конец]

Подсказка

showstatus | true | показывать подсказку при наведении на small картинку
showstatustime | 2000 | время показа подсказки, в мс
statusdivborder | 1px solid black | внешний бордюр подсказки в формате CSS
statusdivbackground | #C0C0C0 | цвет фона контейнера подсказки в формате CSS
statusdivpadding | 4px | внутренний отступ текста подсказки от бордюра в формате CSS
statusdivfont | bold 13px Arial | шрифт текста подсказки в формате CSS
statusdivopacity | 0.8 | прозрачность контейнера подсказки, принимает значения в диапазоне 0-1

Контейнер показа big картинки

magnifierpos | right | сторона отображения контейнера, принимает значения left/right
magnifiersize | [small.width, small.height] | размер контейнера в px, в формате [ширина, высота] по умолчанию равно размеру small картинки
magnifiereffectanimate | showIn | эффект появления/скрытия контейнера, принимает значения fadeIn/showIn/slideIn
innerzoom | false | показывает контейнер внутри small картинки
innerzoommagnifier | false | позволяет перемещаться контейнеру по small картинке, за курсором мыши, эффект линзы
descarea | пусто | указывается ID или имя класса в формате CSS произвольной области внутри которой будет показан контейнер, если width и height области descarea не определены, данный параметр проигнорируется
zindex | пусто | z-index для всех тегов <div> плагина
leftoffset | 15 | отступ контейнера слева от small картинки, в px
rightoffset | 15 | отступ контейнера справа от small картинки, в px
switchsides | true | учитывается край экрана при показе контейнера, если для отображения нехватает места, контейнер будет показан с другой стороны small картинки
magnifierborder | 1px solid black | внешний бордюр контейнера, в формате CSS

Текст к картинке

textdnbackground | #fff | цвет фона контейнера где размещен текст, в формате CSS
textdnpadding | 10px | внутренний отступ текста от бордюра контейнера в формате CSS

textdnfont

13px/20px cursive

шрифт текста в формате CSS,
значение для CSS свойства font, формат:
[font-style || font-variant || font-weight] font-size [/line-height] font-family | inherit

Скорость анимации

scrollspeedanimate | 5 | прокрутка big картинки, принимает целые и дробные значения в диапазоне 1- ∞
zoomspeedanimate | 7 | зуммирование, принимает целые и дробные значения в диапазоне 1- ∞
loopspeedanimate | 2.5 | перемещение области курсора и big контейнера за курсором в режиме эффекта линзы, принимает целые и дробные значения в диапазоне 1- ∞
magnifierspeedanimate | 350 | показ big контейнера, в мс

CSS классы

classmagnifier | magnifier | имя CSS класса для контейнера big картинки, если задан свой класс, то параметр magnifierborder не учитывается
classcursorshade | cursorshade | имя CSS класса для области курсора, если задан свой класс, то параметры cursorshadeborder, cursorshadeopacity, cursorshadecolor не учитываются
classstatusdiv | statusdiv | имя CSS класса для контейнера подсказки, если задан свой класс, то параметры statusdivborder, statusdivbackground, statusdivpadding, statusdivfont, statusdivopacity не учитываются
classtextdn | textdn | имя CSS класса для контейнера с текстом к картинке, если задан свой класс, то параметры textdnbackground, textdnpadding, textdnfont не учитываются

Понравился плагин? Хотите нас поблагодарить? Мы принимаем пожертвования на любой наш кошелек Yandex.Money или PayPal.

Yandex 410015692423354

PayPal www.paypal.me/sergeland71

by SergeLand