Один элемент img, два изображения и jQuery
Чтобы превратить elevateZoom, разработанный уэльским веб-агентством Elevate, в эффект, вам сначала нужно будет встроить jQuery и javascript, как обычно, в головную секцию вашего HTML-документа. Как только вы сделаете этого, плагин можно будет применять к любому элементу img. Большая версия изображений, которая необходима для эффекта увеличения, запускается при помощи атрибута data, добавленного к элементу img:
<img id="pic" src="pic_normal.jpg" data-zoom-image="pic_for_zoom.jpg" />Следующий jQuery-запрос применяет эффект elevateZoom к изображению:
$("#bild").elevateZoom();Этой строки кода javascript будет достаточно для получения эффекта увеличения на изображении. Наведение курсора мыши на изображение отображает увеличенную часть сразу поверх оригинала. Внутри исходного изображения есть прямоугольная рамка, которая определяет, какой отрезок изображения нужно отображать в увеличенном виде.
Определяем позицию увеличенного сегмента
Опция zoomWindowPosition используется для расположения окна увеличения. Нам доступны 16 разных точек привязки:
$("#pic").elevateZoom({
zoomWindowPosition: 6
});В нашем примере мы выбрали позицию 6, которая привяжет окно увеличения по центру прямо под исходным изображением. Если вас не устраивают предусмотренные точки привязки, вы можете выбрать отдельный div в качестве цели увеличения. Расположение свободно определяется при помощи CSS.
В качестве третьего варианта, вы можете полностью отказаться от использования отдельного окна увеличения. Это приведет к тому, что область увеличения будет отображаться прямо внутри исходного изображения (внутреннее увеличение):
$("#pic").elevateZoom({
zoomType: "inner"
});Классическое масштабирование при помощи увеличительного стекла
Кроме стандартной квадратной области увеличения, вы также можете использовать эффект увеличительного стекла:
$("#pic").elevateZoom({
zoomType: "lens",
lensShape: "round",
lensSize : 200
});Размер и форма линзы изменяется.
elevateZoom также имеет и другие опции настройки. Здесь есть эффекты появления и затухания, а также эффект сглаживания для управления движением внутри области увеличения.
Завершение
elevateZoom довольно просто применять и настроить под себя. Галерея в примере даст вам представление об имеющихся способностях. Плагин свободно доступен под лицензионным соглашением MIT и GPL.
