jQuery图片放大镜插件ez-plus.js

jQuery图片放大镜插件ez-plus.js

jquery.ez-plus.js是一款jQuery图片放大镜插件。该jQuery图片放大镜插件支持图片内部放大,外部放大,支持轮播图片,可以和ColorBox或Fancy Box 结合使用。

使用方法
可以通过npm或bower来安装jquery.ez-plus.js插件。

1
2
bower install ez-plus
npm install ez-plus

在页面中引入jquery和jquery.ez-plus.js"文件。

1
2
<script src="js/jquery.min.js"></script>
<script src="js/jquery.ez-plus.js""></script>

HTML结构
在页面中插入一张图片。

1
<img id="zoom_01" src="images/large/image1.jpg" width="400"/>

初始化插件
然后会通过下面的方法来初始化该jQuery图片放大镜插件。

1
$("#zoom_01").ezPlus();

配置参数
jquery.ez-plus.js插件的可用的配置参数如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
$("#demo").ezPlus({
  container: 'ZoomContainer',
  attrImageZoomSrc: 'zoom-image', // attribute to plugin use for zoom
  borderColour: '#888',
  borderSize: 4,
  constrainSize: false,  //in pixels the dimensions you want to constrain on
  constrainType: false,  //width or height
  containLensZoom: false,
  cursor: 'inherit', // user should set to what they want the cursor as, if they have set a click function
  debug: false,
  easing: false, // easing effects
  easingAmount: 12,
  enabled: true,
   
  // gallery options
  gallery: false,
  galleryActiveClass: 'zoomGalleryActive',
  gallerySelector: false,
  galleryItem: 'a',
  galleryEvent: 'click',
   
  // enable cross-fade effect
  imageCrossfade: false,
   
  // lens options
  lensBorderColour: '#000',
  lensBorderSize: 1,
  lensColour: 'white', //colour of the lens background
  lensFadeIn: false,
  lensFadeOut: false,
  lensOpacity: 0.4, //opacity of the lens
  lensShape: 'square', //can be 'round'
  lensSize: 200,
  lenszoom: false,
   
  // image loading spinner
  loadingIcon: false, //http://www.example.com/spinner.gif
   
  // This change will allow to decide if you want to decrease
  // zoom of one of the dimensions once the other reached it's top value,
  // or keep the aspect ratio, default behaviour still being as always,
  // allow to continue zooming out, so it keeps retrocompatibility.
  mantainZoomAspectRatio: false,
  maxZoomLevel: false,
  minZoomLevel: 1.01,
   
  // callbacks
  onComplete: $.noop,
  onDestroy: $.noop,
  onImageClick: $.noop,
  onImageSwap: $.noop,
  onImageSwapComplete: $.noop,
  onShow: $.noop,
  onHide: $.noop,
  onZoomedImageLoaded: $.noop,
   
  preloading: 1, //by default, load all the images, if 0, then only load images after activated (PLACEHOLDER FOR NEXT VERSION)
  respond: [],
  responsive: true,
  scrollZoom: false, //allow zoom on mousewheel, true to activate
  scrollZoomIncrement: 0.1,  //steps of the scrollzoom
  showLens: true,
  tint: false, //enable the tinting
  tintColour: '#333', //default tint color, can be anything, red, #ccc, rgb(0,0,0)
  tintOpacity: 0.4, //opacity of the tint
  touchEnabled: true,
   
  // zoom options
  zoomActivation: 'hover', // Can also be click (PLACEHOLDER FOR NEXT VERSION)
  zoomContainerAppendTo: 'body', //zoom container parent selector
  zoomId: -1, // identifier for the zoom container
  zoomLevel: 1, //default zoom level of image
  zoomTintFadeIn: false,
  zoomTintFadeOut: false,
  zoomType: 'window', //window is default,  also 'lens' available -
  zoomWindowAlwaysShow: false,
  zoomWindowBgColour: '#fff',
  zoomWindowFadeIn: false,
  zoomWindowFadeOut: false,
  zoomWindowHeight: 400,
  zoomWindowOffsetX: 0,
  zoomWindowOffsetY: 0,
  zoomWindowPosition: 1, //Possible values: 1-16, but we can also position with a selector string.
  zoomWindowWidth: 400,
  zoomEnabled: true, //false disables zoomwindow from showing
  zIndex: 999
   
});

文件信息:

    0

    发表评论