jQuery响应式放大镜插件xZoom示例-bootschool.net

xZoom是一款多功能的jquery图片预览放大镜插件, 支持多种图片放大模式，支持响应式，能够跟FancyBox、Magnific Pop-up等插件组合起来使用，功能强大。该插件可以在众多电商网站中使用，它可以让你生成一个带有缩略图和放大高清图的产品图库。

入门指南

插件特性

支持jQuery1.2.6及以上版本
支持很多选项、特效、支持定制化，简单易用
轻量级，压缩后大小只有14k左右
可以分别加载低清图和高清图
支持IE6+,Chrome, FireFox, Opera, Safari, Android, iOS
支持响应式输出
提供了支持FancyBox, Magnific PopUp 和 HammerJS组合使用的API接口

使用教程

1、引入依赖库

<link rel="stylesheet" type="text/css" href="css/xzoom.css" media="all" />
<script src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/xzoom.min.js"></script>

2、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>

3、JavaScript脚本初始化

$(".xzoom, .xzoom-gallery").xzoom({tint: '#333', Xoffset: 15});

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 放大图片打开时的默认放大级别。-1表示-100%，1表示100%，默认值0。
scroll 是否在滚动鼠标滚轮时放大缩小图片，默认值true。
tint 背景颜色。建议使用十六进制的颜色值，默认值false。
tintOpacity 背景的透明度，值在0-1之间，默认值0.5。
lens 放大镜的颜色，建议使用十六进制的颜色值，默认值false。
lensOpacity 放大镜的透明度，默认值0.5。
lensShape 放大镜的的形状，”box” 或 “circle”，默认值box。
zoomWidth 放大镜的宽度，单位像素，默认值auto。
zoomHeight 放大镜的高度，单位像素，默认值auto。
sourceClass 原图div的class名称，默认值xzoom-source。
loadingClass 预加载div的class名称，默认值xzoom-loading。
lensClass 放大镜div的class名称，默认值xzoom-lens。
zoomClass 放大窗口div的class名称，默认值xzoom-preview。
activeClass 当前缩略图的class名称，默认值xactive。
adaptive 是否开启自适应功能，默认值true。
lensReverse 当旋转内部放大镜并且该选项为true时，放大镜的移动和显示方向相反，默认值false。
adaptiveReverse 和lensReverse相同，但是只有在adaptive选项为true是有效，默认值false。
title 是否在输出窗口中显示图片标题，默认值false。
titleClass 图片标题div的class名称，默认值xzoom-caption。
bg 放大图片作为背景输出，默认值false。