На днях передо мной стояла задача: реализовать на интернет-магазине ювелирных украшений возможность для пользователя посмотреть увеличенную фотографию изделия по частям, т.е. показывать только ту часть картинки, которую захочет увеличить сам пользователь.
Т.к. на сайте уже использовалась библиотека JQuery, я решила поискать плагин, который бы помог реализовать мою задачу. И такой плагин действительно нашелся - .
Спонсор статьи: Блог с 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 // число объективов}); });
