jQuery imgBox是一个点击放大和浏览图片的插件

2022-11-16 0 71

jQuery imgBox是一个点击放大和浏览图片的插件

jQuery imgBox imgBox单击图片放大浏览插件。点击图片,弹出浏览窗口,可以批量浏览。演示效果截图如下:

 

项目地址:https://github.com/tsi/jQuery.imgBox

 

下载地址:https://github.com/tsi/jQuery.imgBox/zipball/master

jQuery imgBox是一个点击放大和浏览图片的插件

 

引入文件

 

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js”></script>

<script type=”text/javascript” src=”imgBox/jquery.imgbox.js”></script>

<link rel=”stylesheet” href=”imgBox/imgbox.css” />

 

对html中a标签进行图片集合浏览,给<a>标签的title添加内容,会在弹窗中显示

 

<a title=”Lorem ipsum dolor sit amet” href=”big_image1.jpg”><img src=”thumb1.jpg”/></a>

<a title=”Consectetur adipiscing elit” href=”big_image2.jpg”><img src=”thumb2.jpg”/></a>

<a title=”Vivamus tincidunt massa in turpis” href=”big_image3.jpg”><img src=”thumb3.jpg”/></a>

 

JQuery控制代码:

 

$(“a”).imgbox();

 

参数选项:

 

$(“a”).imgbox({

padding: 10, // Set the padding/transparent border around the image.

border: 2, // Set the solid border around the image.

alignment: ‘center’, // Position – may be auto OR center.

allowMultiple: false, // Allow opening multiple imgBoxes.

autoScale: true, // Scale the image to fit the available space.

speedIn: 500, // Set the zoom-in speed.

speedOut: 500, // Set the zoom-out speed.

easingIn: ‘swing’, // Set the zoom-in animation easing.

easingOut: ‘swing’, // Set the zoom-out animation easing.

zoomOpacity: false, // If true, changes image transparency when zooming.

overlayShow: true, // Display an overlay under the imgBox.

overlayOpacity: 0.7, // Set overlay opacity.

hideOnOverlayClick: true, // Hide imgBox when the overlay is clicked.

hideOnContentClick: false, // Hide imgBox when the image is clicked.

slideshow: true, // Display next/previous controls.

theme: ‘light’ // Choose a color scheme (light/black).

});

 

参数的含义:

 

padding:弹窗中图片的边框,0为没有边框。

alignment:弹窗的位置,“auto”或“center”,默认情况下,它从缩略图所在方向扩展弹窗

allowMultiple:如果选true,允许多个弹出窗口同时打开

autoScale:如果为true,弹窗会自适应窗口的大小

speedIn、speedOut:打开弹窗和关闭弹窗的速度,单位:毫秒

zoomOpacity:如果为true,会在弹窗缩放时改变透明度

overlayShow:如果为true,会有遮罩层(默认为false;遮罩层的颜色在css中设置)

overlayOpacity:遮罩层的透明度(取值范围0~1)

hideOnOverlayClick:当点击遮罩层时,关闭弹窗

hideOnContentClick:当点击图片时,关闭弹窗

 

1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!cheeksyu@vip.qq.com
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有积分奖励和额外收入!
5.严禁将资源用于任何违法犯罪行为,不得违反国家法律,否则责任自负,一切法律责任与本站无关

发表评论
暂无评论