17 сентября 2013
6004
Эффект zoom

Эффект zoom

JQuery
Демонстрация » Скачать »

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

 

Эффект zoom jquery

 

Шаг первый. Подключение библиотек и скриптов.

 

Прежде всего стоит подключить два 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 как у нас)

 

 

Шаг второй. HTML.

 

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

 

Параметр Значение Описание
adjustX 0 Положение по координатам от оси X
adjustY 20 Положение по координатам от оси Y
zoomWidth 437 Ширина показываемого увеличенного изображения
smoothMove 10 Плавное увеличение изображения
tint 10 Затемнение

 

<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>

 

 

Шаг третий. CSS.

 

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

 

/*Zoom эффект*/

#img {
width: 437px;
}

 

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

 

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



Источник материала »