jquery.fs.boxer.min.js
多功能jQuery弹出框弹出层插件Boxer,基于jQuery,支持单张多张图片展示、支持视频、文字、iframe加载页面,还支持全屏展示,众多的参数配置功能,支持自定义显示位置、支持弹出层透明度定义、支持函数callback,支持按钮文字定义、支持是否支持移动端展示等配置
Boxer 是一款基于 jQuery 的 Lightbox 效果插件,可用于显示图片、视频、iframe和其他内容,和其他Lightbox 效果插件一样,Boxer 在显示组图的时候,有左右箭头控制。Boxer 还能自动检测设备是否为移动设备,针对移动设备显示更适合的样式和更友好的触摸控制。
使用方法
1.加载插件和jQuery
2.HTML内容
标签 a 的属性 title 用于显示图片的标题。
3.函数调用
<script src="jquery.js"></script>
<script src="jquery.fs.boxer.js"></script>
<link href="jquery.fs.boxer.css" rel="stylesheet">
2.HTML内容
<a href="image_1.jpg" <strong><span style="color:#ff0000;">class="boxer"</span> title="Caption One"</strong> data-gallery="gallery">
<img src="thumbnail_1.jpg" alt="Thumbnail One" />
</a>
<a href="image_2.jpg" <strong><span style="color:#ff0000;">class="boxer"</span> title="Caption Two"</strong> data-gallery="gallery">
<img src="thumbnail_2.jpg" alt="Thumbnail Two" />
</a>
3.函数调用
<script type="text/javascript">
/*简单调用*/
$('<strong><span style="color:#ff0000;">.boxer</span></strong>').boxer();
/*参数设置*/
$(function(){
$("<strong><span style="color:#ff0000;">.boxer</span></strong>").boxer({
mobile: true
});
});
</script>