网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。
这是一款可定制,支持触摸缩放、弹窗功能的jquery图片放大镜插件。可以用于产品图片细节展示使用。
更多功能:
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
});
转载请注明来源:jQuery可定制多功能图像缩放/灯箱/图片展示插件
本文永久链接地址:https://www.moyouyouw.cn/code/872.html
郑重声明:本站所有主题/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系本站删除,谢谢!我们不承担任何技术及版权问题,且不对任何资源负法律责任。
上一篇
下一篇
已有 位小伙伴发表了看法
欢迎 你 发表评论