Elevate Zoom - jQuery плагин с эффектом увеличения части изображения

27 августа 2013  33718  jQuery, html, верстка, скрипты

 

Эффект увеличения уже традиционно используется в интернет-магазинах — посетитель имеет возможность детально посмотреть товар, а разработчики сайтов экономят место для описания товара.

Плагин Elevate Image Zoom по качеству реализации ничем не уступает различным платным скриптам по масштабированию изображений — много эффектов, устанавливается и настраивается легко, работает надежно.

«Excavator»

Ботинки «Excavator» — для приверженцев туризма, путешествий и экстрима во всех его проявлениях.

Материал — натуральный нубук

Цена — 2 690 руб.

Требуются два изображения товара — уменьшенная и большая (оригинал). Желательно сохранить пропорции.

<img id="zoom_mw" src="img/image_small.jpg" data-zoom-image="img/image_big.jpg" />

Подключаем библитотеку jQuery, скрипт и функцию эффекта.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="/js/jquery.elevatezoom.js"></script>
<script type="text/javascript">
$("#zoom_mw").elevateZoom({scrollZoom : true});
</script>

Уровень увеличения, размеры и цвет линзы, позиция, рамка и размер окна увеличения, степень прозрачности и прочие настройки размещены в файле скрипта в разделе elevateZoom.options.

Иллюстрация позиционирования окна зума относительно исходного изображения — zoomWindowPosition: # (в настройках указать число требуемой позиции).

 

 

Источник - http://www.elevateweb.co.uk/image-zoom

 

Скачать исходники примера скрипта

 

Комментарии для сайта Cackle
наверх