最新赞助活动温馨提示:自愿赞助服务器费用,学生和没有工作的整站资源免费下载!
头像

Lightbox漂亮的图片弹出层插件

来源:http://www.erdangjiade.com/ 沐浴春风 2015-06-15 08:19浏览(1595)

lightbox用于显示图片、视频、iframe和其他内容,和fancybox 功能效果类似,且在显示组图的时候,有左右箭头控制。lightbox还能自动检测设备是否为移动设备,针对移动设备显示更适合的样式和更友好的触摸控制。

0、请不要问“在不在”之类的问题,有问题直接问!1、学生或暂时没有工作的童鞋,整站资源免费下载!2、¥9.9充值终身VIP会员,加我微信,826096331 拉你进VIP群学习!3、程序员加油,技术改变世界。在线 充值

Lightbox漂亮的图片弹出层插件
分类:图片代码 > 图片插件 难易:初级
查看演示

加我微信,拉你进VIP群学习:

下载资源 下载积分: 30 积分

HTML

我们在需要显示层的图片链接上加上样式.boxer

<a title="标题闪电闪电" class="boxer" href="images/1b.jpg">
     <img src="images/1s.jpg" alt="">
</a>

引入jQuery库和boxer相关组件

<link rel="stylesheet" href="css/jquery.fs.boxer.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.fs.boxer.js"></script>

jQuery

$(function() {
      $('.boxer').boxer();
});
参数 描述 默认值
callback 打开后的回调函数
customClass 增加自定义 class
duration 动画持续时间 250
fixed 是否固定在浏览器中央(不显示关滚动条) false
formatter 标题格式函数
height 加载时的初始高度 100
labels.close 关闭按钮的文字 ‘Close’
labels.count 组图的文字 ‘of’
labels.next 下一个按钮的文字 ‘Next’
labels.previous 上一个按钮的文字 ‘Previous’
margin 与浏览器视口的边距 50
minHeight 最小高度 100
minWidth 最小宽度 100
mobile 是否强制使用移动模式显示 false
opacity 遮罩不透明度 0.75
retina 是否兼容 retina 高清显示 false
requestKey GET variable for ajax / iframe requests ‘boxer’
top 距离顶部位置 -
videoRadio 视频的高度 0.5625
videoWidth 视频的宽度 600
width 加载时的初始宽度 100
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/200.html
评论0
头像

友情提示:垃圾评论一律封号 加我微信:826096331拉你进VIP群学习群

1 2