本篇教程介绍了jQuery教程 baguetteBox.js详解，希望阅读本篇文章以后大家有所收获，帮助大家对jQuery的理解更加深入。

<

lightbox JS插件--baguetteBox.js，它是用纯Javascript创建的图像展示效果，拥有图像放大缩小并带有相应的CSS3过度，并能在触摸屏等设备上完美展示。

baguetteBox.js 优势
javascript完成，不需要jQuery库支持
支持触屏手机端
支持显示标题和说明等
支持响应式效果
支持CSS3过渡效果
使用 SVG 按钮，没有多余的文件下载
启用 gzip 压缩后仅 2KB
在线实例
默认  淡入淡出  响应式图片
使用方法

<div class="header large"> 
 <ul class="nav"> 
    <li><a class="cur" href="#" title="首页">首页</a></li> 
    <li><a href="#" title="模板">网站模板</a></li> 
    <li><a href="#" title="网页特效">网页特效</a></li> 
    <li><a href="#" title="网站psd">网站psd</a></li> 
 </ul> 
</div>

　　
复制

我们在页面上放置多个可点击的缩略图，并且在a标签上加上图片链接href属性和data-caption标题

<div class="baguetteBox"> 
    <a href="img/1-1.jpg" data-caption="Golden Gate Bridge"><img src="img/thumbs/1-1.jpg"></a> 
    <a href="img/1-2.jpg" title="Midnight City"><img src="img/thumbs/1-2.jpg"></a> 
   ...... 
</div>

$(function(){ 
    baguetteBox.run('.baguetteBox', { 
        //options 
    }); 
});
参数详解
参数  描述  默认值
captions  显示图片说明  true
buttons  显示按钮，可选 ‘auto’ / true / false  auto
async  异步加载文件  false
preload  需要预加载图片的个数  2
animation  动画方式，可选 slideIn / fadeIn  slideIn    

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端jQuery频道！