baguetteBox图片弹出层插件

今天为大家分享一套 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="http://www.sucaiq.com/" title="首页">首页</a></li>
    <li><a href="http://www.sucaiq.com/templates" title="模板">网站模板</a></li>
    <li><a href="http://www.sucaiq.com/js" title="网页特效">网页特效</a></li>
    <li><a href="http://www.sucaiq.com/psd" title="网站psd">网站psd</a></li>
 </ul>
</div>

引入jQuery库和baguetteBox相关插件

<script src="js/jquery.js"></script>
<script src="js/baguetteBox.js"></script>

HTML

我们在页面上放置多个可点击的缩略图，并且在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>

jQuery

$(function(){
    baguetteBox.run('.baguetteBox', {
        //options
    });
});