多功能jquery图片预览放大镜插件-爱编程

多功能jquery图片预览放大镜插件

来源：htmleaf 阅读：17 时间：2018-02-04 01:34

xZoom是一款多功能的jquery图片预览放大镜插件。它支持多种图片放大模式，可以和Fancy Box或Magnific Pop-up等插件结合使用，功能非常强大。

使用方法

在页面中引入jquery和xzoom.css以及xzoom.js文件。

<link rel="stylesheet" href="css/xzoom.css">
<script src="jquery.min.js"></script>
<script src="js/xzoom.min.js"></script>

HTML结构

xZoom要求使用下面的基本HTML结构，你可以按自己的需求设置图片的数量。

<img class="xzoom" src="path/to/preview_image_01.jpg" xoriginal="path/to/original_image_01.jpg" />

<div class="xzoom-thumbs">
  <a href="path/to/original_image_01.jpg">
    <img class="xzoom-gallery" width="80" src="path/to/thumbs_image_01.jpg"  xpreview="path/to/preview_image_01.jpg">
  </a>
  <a href="path/to/original_image_02.jpg">
    <img class="xzoom-gallery" width="80" src="path/to/preview_image_02.jpg">
  </a>
  <a href="path/to/original_image_03.jpg">
    <img class="xzoom-gallery" width="80" src="path/to/preview_image_03.jpg">
  </a>
  <a href="path/to/original_image_04.jpg">
    <img class="xzoom-gallery" width="80" src="path/to/preview_image_04.jpg">
  </a>
</div>

初始化插件

在页面DOM元素加载完毕之后，可以通过下面的方法来初始化xZoom插件。

$(".xzoom").xzoom();

配置参数

xZoom图片放大镜插件的可用配置参数如下：

属性	默认值	描述
position	right	图片放大窗口的位置。可用值有："top", "left", "right", "bottom", "inside", "lens", "#ID"。
rootOutput	true	该参数可以将输出的放大窗口设置在任何位置。
Xoffset	0	图片放大窗口水平位置的偏移。
Yoffset	0	图片放大窗口垂直位置的偏移。
fadeIn	true	显示放大图片是否使用淡入效果。
fadeTrans	true	淡入淡出效果的过渡时间。
fadeOut	false	关闭放大图片是否使用淡出效果。
smoothZoomMove	3	在大窗口中图片的平滑移动级别，数值越大越平滑。
smoothLensMove	1	圆形镜片的平滑移动级别。
smoothScale	6	放大缩小的平滑级别。
defaultScale	0	放大图片打开时的默认放大级别。-1表示-100%，1表示100%。
scroll	true	是否在滚动鼠标滚轮时放大缩小图片。
tint	false	背景颜色。建议使用十六进制的颜色值。
tintOpacity	0.5	背景的透明度，值在0-1之间。
lens	false	放大镜的颜色，建议使用十六进制的颜色值。
lensOpacity	0.5	放大镜的透明度。
lensShape	box	放大镜的的形状，"box" 或 "circle"。
zoomWidth	auto	放大镜的宽度，单位像素。
zoomHeight	auto	放大镜的高度，单位像素。
sourceClass	xzoom-source	原图div的class名称。
loadingClass	xzoom-loading	预加载div的class名称。
lensClass	xzoom-lens	放大镜div的class名称。
zoomClass	xzoom-preview	放大窗口div的class名称。
activeClass	xactive	当前缩略图的class名称。
adaptive	true	是否开启自适应功能。
lensReverse	false	当旋转内部放大镜并且该选项为true时，放大镜的移动和显示方向相反。
adaptiveReverse	false	和lensReverse相同，但是只有在adaptive选项为true是有效。
title	false	是否在输出窗口中显示图片标题。
titleClass	xzoom-caption	图片标题div的class名称。
bg	false	放大图片作为背景输出。

xZoom图片放大镜插件的github地址为：https://github.com/payalord/xZoom

在线预览源码下载