图片/图形

xZoom 图片预览放大镜插件

创客主机


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

使用方法

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

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

HTML结构

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

  1. <img class="xzoom" src="path/to/preview_image_01.jpg" xoriginal="path/to/original_image_01.jpg" />
  2.  
  3. <div class="xzoom-thumbs">
  4.   <a href="path/to/original_image_01.jpg">
  5.     <img class="xzoom-gallery" width="80" src="path/to/thumbs_image_01.jpg"  xpreview="path/to/preview_image_01.jpg">
  6.   </a>
  7.   <a href="path/to/original_image_02.jpg">
  8.     <img class="xzoom-gallery" width="80" src="path/to/preview_image_02.jpg">
  9.   </a>
  10.   <a href="path/to/original_image_03.jpg">
  11.     <img class="xzoom-gallery" width="80" src="path/to/preview_image_03.jpg">
  12.   </a>
  13.   <a href="path/to/original_image_04.jpg">
  14.     <img class="xzoom-gallery" width="80" src="path/to/preview_image_04.jpg">
  15.   </a>
  16. </div>

初始化插件

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

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

配置参数

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

属性默认值描述
positionright图片放大窗口的位置。可用值有:"top", "left", "right", "bottom", "inside", "lens", "#ID"。
rootOutputtrue该参数可以将输出的放大窗口设置在任何位置。
Xoffset0图片放大窗口水平位置的偏移。
Yoffset0图片放大窗口垂直位置的偏移。
fadeIntrue显示放大图片是否使用淡入效果。
fadeTranstrue淡入淡出效果的过渡时间。
fadeOutfalse关闭放大图片是否使用淡出效果。
smoothZoomMove3在大窗口中图片的平滑移动级别,数值越大越平滑。
smoothLensMove1圆形镜片的平滑移动级别。
smoothScale6放大缩小的平滑级别。
defaultScale0放大图片打开时的默认放大级别。-1表示-100%,1表示100%。
scrolltrue是否在滚动鼠标滚轮时放大缩小图片。
tintfalse背景颜色。建议使用十六进制的颜色值。
tintOpacity0.5背景的透明度,值在0-1之间。
lensfalse放大镜的颜色,建议使用十六进制的颜色值。
lensOpacity0.5放大镜的透明度。
lensShapebox放大镜的的形状,"box" 或 "circle"。
zoomWidthauto放大镜的宽度,单位像素。
zoomHeightauto放大镜的高度,单位像素。
sourceClassxzoom-source原图div的class名称。
loadingClassxzoom-loading预加载div的class名称。
lensClassxzoom-lens放大镜div的class名称。
zoomClassxzoom-preview放大窗口div的class名称。
activeClassxactive当前缩略图的class名称。
adaptivetrue是否开启自适应功能。
lensReversefalse当旋转内部放大镜并且该选项为true时,放大镜的移动和显示方向相反。
adaptiveReversefalse和lensReverse相同,但是只有在adaptive选项为true是有效。
titlefalse是否在输出窗口中显示图片标题。
titleClassxzoom-caption图片标题div的class名称。
bgfalse放大图片作为背景输出。

Github地址:https://github.com/payalord/xZoom

(0)

本文由 创客云 作者:创客云 发表,转载请注明来源!

阿里云

热评文章

发表评论

嘿,欢迎咨询!