Connect_logo_6.png 退出
前端视频教程 小程序 众筹源码 python 商城源码 商城模板 响应式模板 中文模板 手机模板 企业源码

jQuery点击弹窗图片放大查看插件

作者/代码整理:  (转载请附加本文地址,带有“懒人原生”字样的谢绝转载) 发布日期:2018-09-19
一款强大的jQuery点击弹窗图片放大查看插件,支持键盘左右按键和鼠标滚轮切换预览图片,最大化、最小化窗口预览。


js代码

<script src="js/jquery.mousewheel.min.js"></script>
<script src="js/pictureViewer.js"></script>
<script>
$(function () {
	$('.image-list').on('click', '.cover', function () {
		var this_ = $(this);
		var images = this_.parents('.image-list').find('.cover');
		var imagesArr = new Array();
		$.each(images, function (i, image) {
			imagesArr.push($(image).children('img').attr('src'));
		});
		$.pictureViewer({
			images: imagesArr, //需要查看的图片,数据类型为数组
			initImageIndex: this_.index() + 1, //初始查看第几张图片,默认1
			scrollSwitch: true //是否使用鼠标滚轮切换图片,默认false
		});
	});
});
</script>