Скачать 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 не учитываются |