Нас так же ищут по следующим запросам: 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 не учитываются