Эффект zoom

Частенько на сайтах, а точнее на некоторых интернет-магазинах, можно встретить зуммирования фотографий на сайте, а вернее эффект zoom при наведении на изображение. Данный эффект создается с помощью плагина, написанного на языке JQuery, подробнее можете ознакомиться на сайте указанном в источниках. Там находится огромная коллекция zoom плагинов и не только. Ну подробнее разобраться с кодом и параметрами, поможем Вам тут.

Прежде всего стоит подключить два JQuery файла, без которых в принципе работа скрипта невозможна. По стандарту подключаем библиотеку JQuery и сам скрипт зуммирования.

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/cloud-zoom.1.0.2.min.js"></script>

Затем создаем папку для изображений (допустим images) и заливаем туда любые изображения под любым названием (для примера 1.jpg как у нас)

Далее нам потребуется div блок, в котором мы размещаем ссылку на эффект зуммирования изображения, применяя тем самым класс cloud-zoom, а также прописываем в обязательном порядке идентификатор zoom1. Стоит также разобраться с библиотекой cloud-zoom.1.0.2.min.js в которой имеются параметры.

<div id="img">
<a href="images/1.jpg" class="cloud-zoom" id="zoom1"
rel="adjustX: 0, adjustY: 20, zoomWidth: 437, smoothMove : 10, tint: 10">
<img src="images/1.jpg" width="437" height="278" title="Горы и лес"/>
</a>
</div>

Для нашего скрипта много стилей не нужно, поэтому пропишем всего одно свойство.

/*Zoom эффект*/

#img {
width: 437px;
}

Вот пожалуй и все на этом, затронули по сути все моменты эффекта зуммирования. Кстати, пока не забыл имеется похожий эффект на этот по функционалу, можете посмотреть JQuery Zoom, может кому то и такое пригодится. 

Большое спасибо за внимание! Удачи в реализации!