На днях передо мной стояла задача: реализовать на интернет-магазине ювелирных украшений возможность для пользователя посмотреть увеличенную фотографию изделия по частям, т.е. показывать только ту часть картинки, которую захочет увеличить сам пользователь.

Т.к. на сайте уже использовалась библиотека JQuery, я решила поискать плагин, который бы помог реализовать мою задачу. И такой плагин действительно нашелся – jQZoom.

Спонсор статьи: Блог с SEO советами для вебмастеров.
Хотите стать спонсором?

Работает он очень просто: при наведении курсором на превью изображения выделяется некоторая его область, которая отображается в увеличенном виде рядом с превью.

Для того чтобы подключить плагин, необходимо следующее:

1. В head страницы добавить строку вызова дополнительного css-файла для плагина:

<link href="your_path/jqzoom.css" rel="stylesheet" type="text/css" media="screen" >

2. Подключить скрипты JQuery и плагина

<script src="your_path/jquery.js" type="text/javascript"></script>
<script src="your_path/jquery.jqzoom.js" type="text/javascript"></script>

3. Написать html код, который будет выводить превью, например блок div. Присвоить ему класс  “jqzoom”. А каждому изображению, которое необходимо увеличить прописать атрибут jqimg – в нем будет путь к изображению большего размера.

<div class="jqzoom"><img src="images/shoe4_small.jpg" alt="shoe" jqimg="images/shoe4_big.jpg" /></div>

4. И последнее – вызвать функцию, которая отвечает за работу плагина:

$(document).ready(function(){
$(".jqzoom").jqueryzoom({
xzoom: 300, //ширина блока, где будет отображаться увеличенная картинка, по умолчанию 200
yzoom: 300, //высота блока, где будет отображаться увеличенная картинка, по умолчанию 200
offset: 40, //размеры блока на превью при наведении курсором, по умолчанию 10x10
position: "right", //позиционирование блока, по умолчанию "right"
preload:1 // по умолчанию загружатся в буфер 1 изображение
lens:1 // число объективов});
});

Скачать плагин JQZoom
Посмотреть примеры использования плагина JQZoom