帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。

当前位置:首页 > 资源 > 网页特效 > 正文

jQuery可定制多功能图像缩放/灯箱/图片展示插件

帝国模板之家 2020-12-05 网页特效 评论

插件介绍

这是一款可定制,支持触摸缩放、弹窗功能的jquery图片放大镜插件。可以用于产品图片细节展示使用。

更多功能:

  1. 支持鼠标滚轮放大。
  2. 支持图像预加载。
  3. 支持悬停或单击以缩放。
  4. 定制变焦镜头。
  5. 基础的画廊灯箱特效。

使用方法

1.在页面中包含最新的jquery库和jquery.ez-plus.js插件文件。

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

2. 如果想支持鼠标滚轮缩放,可以加载jquery.mousewheel.js文件(可选)。

<script src="jquery.mousewheel.js"></script>

3. 更多缩放效果(可选)。

<script src="jquery.easing.js"></script>

4.图像库(可选)。

<script src="jquery.colorbox.js"></script>
<link rel="stylesheet" href="colorbox.css">

5. 插件初始化,启动图片缩放。

<img id="demo" src="image.jpg">
$("#demo").ezPlus();

6. 创建具有缩放和灯箱效果的图像库。

<img id="demo" src="1.jpg" data-zoom-image="1.jpg"/>
<div id="gallery_demo">
  <a href="#" data-image="1.jpg" data-zoom-image="1.jpg">
      <img id="img_01" src="1.jpg"/>
  </a>
  <a href="#" data-image="2.jpg" data-zoom-image="2.jpg">
      <img id="img_01" src="2.jpg"/>
  </a>
  <a href="#" data-image="3.jpg" data-zoom-image="3.jpg">
      <img id="img_01" src="3.jpg"/>
  </a>
  <a href="#" data-image="4.jpg" data-zoom-image="4.jpg">
      <img id="img_01" src="4.jpg"/>
  </a>
  <a href="#" data-image="5.jpg" data-zoom-image="5.jpg">
      <img id="img_01" src="5.jpg"/>
  </a>
</div>
$("#demo").ezPlus({
  gallery: 'gallery_demo',
  cursor: 'pointer',
  galleryActiveClass: "active",
  imageCrossfade: true,
  loadingIcon: "images/spinner.gif"
});

$("#demo").bind("click", function (e) {
  var ez = $('#zoom_03').data('ezPlus');
  ez.closeAll(); 
  $.fancybox(ez.getGalleryList());
  return false;
});

7. 插件默认配置选项。

$("#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

});
美梦,诞生在一瞬间,这短暂的喜悦,也就像泡沫一样,往往

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言