图片/图形

xZoom 图片预览放大镜插件

创客主机

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

使用方法

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

也想出现在这里?联系我们
WordPress 主题
  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 图片放大镜插件的可用配置参数如下:

属性 默认值 描述
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 放大图片作为背景输出。

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

(0)

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

阿里云

热评文章

发表评论

精彩推荐

Supro - 极简电商WordPress汉化主题

钻石珠宝奢侈品DedeCMS织梦模板

本站承接 WordPress / DedeCMS / ThinkPHP 等
系统建站、仿站、开发、定制等业务!

Hi, 如果您有主题插件代购(30-600元)汉化等建站相关业务,可以 跟我联系 哦!
欢迎投稿
嘿,欢迎咨询!