图片/图形

Ez-plus 图片放大镜jQuery插件

阿里云


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

使用方法

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

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

Github 地址:https://github.com/igorlino/elevatezoom-plus

Ez-plus 图片放大镜 jQuery 插件

已有 461 人购买
查看演示升级 VIP立刻购买

演示地址 下载地址
收藏
(0)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

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