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

ПРИМЕР 1

Скачать demo1.zip

<!-- HTML -->

<img class="my-foto" src="/images/image-small.jpg" data-large="/images/image-big.jpg" title="Фото">

<!-- JAVASCRIPT -->

<script>
jQuery(function(){

$(".my-foto").imagezoomsl({

zoomrange: [3, 3]
});
});
</script>

ПРИМЕР 2

Скачать demo2.zip

<!-- HTML -->

<img class="my-foto" src="/images/image-small.jpg" data-large="/images/image-big.jpg"
data-title="Red Valentino" data-help="Используйте колесико мыши для Zoom +/-" title="Фото">

<!-- JAVASCRIPT -->

<script>
jQuery(function(){

$(".my-foto").imagezoomsl({

zoomrange: [1, 10],
cursorshadeborder: "10px solid #000",
magnifiereffectanimate: "fadeIn",
magnifierpos: "left"
});
});
</script>

ПРИМЕР 3

Скачать demo3.zip

<!-- HTML -->

<img class="my-foto" src="/images/image-small.jpg" data-large="/images/image-big.jpg"
data-text-bottom="Осень-зима 2013/14 / Ready-To-Wear / НЕДЕЛЯ МОДЫ: Нью-Йорк" title="Фото">

<!-- JAVASCRIPT -->

<script>
jQuery(function(){

$(".my-foto").imagezoomsl({

zoomrange: [2.12, 12],
magnifiersize: [530, 340],
scrollspeedanimate: 10,
loopspeedanimate: 5,
cursorshadeborder: "10px solid black",
magnifiereffectanimate: "slideIn"
});
});
</script>

ПРИМЕР 4

Скачать demo4.zip

<!-- CSS -->

<style>
.my-container{
border: 1px solid #F0F0F0;
width: 250px;
height: 250px;
}
</style>

<!-- HTML -->

<img class="my-foto" src="/images/image-small.jpg" data-large="/images/image-big.jpg" title="Фото">
<div class="my-container"></div>

<!-- JAVASCRIPT -->

<script>
jQuery(function(){

$(".my-foto").imagezoomsl({

descarea: ".my-container",
zoomrange: [1, 12],
magnifiereffectanimate: "fadeIn",
magnifierborder: "none"
});
});
</script>

ПРИМЕР 5

Скачать demo5.zip

<!-- HTML -->

<img class="my-foto" src="/images/image-small.jpg" data-large="/images/image-big.jpg" title="Фото">

<!-- JAVASCRIPT -->

<script>
jQuery(function(){

$(".my-foto").imagezoomsl({

zoomrange: [1, 12],
zoomstart: 4,
innerzoom: true,
magnifierborder: "none"
});
});
</script>

ПРИМЕР 6

Скачать demo6.zip

<!-- CSS3 -->

<!-- круглая лупа в Chrome и Firefox -->
<style>
.round-loupe{
border-radius: 75px;
border: 5px solid #F0F0F0;
}
</style>

<!-- HTML -->

<img class="my-foto" src="/images/image-small.jpg" data-large="/images/image-big.jpg" title="Фото">

<!-- JAVASCRIPT -->

<script>
jQuery(function(){

$(".my-foto").imagezoomsl({

innerzoommagnifier: true,
classmagnifier: window.external ? window.navigator.vendor === "Yandex" ? "" : "round-loupe" : "",
magnifierborder: "5px solid #F0F0F0", // fix для Opera, Safary, Yandex
zoomrange: [2, 8],
zoomstart: 4,
magnifiersize: [150, 150]
});
});
</script>

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

Yandex 410015692423354

PayPal www.paypal.me/sergeland71

by SergeLand

Осень-зима 2013/14 / Ready-To-Wear / НЕДЕЛЯ МОДЫ: Нью-Йорк