画廊插件baguetteBox

HTML

<link rel="stylesheet" href="css/baguetteBox.css">
<div class='baguetteBox1'>
     <a href='/test1.jpg'>  <!-- 路径为原图 -->
        <img src='/test1_s.jpg'>  <!-- 显示为缩略图 -->
     </a>
     <a href='/test3.jpg'>  <!-- 路径为原图 -->
        <img src='/test3_s.jpg'>  <!-- 显示为缩略图 -->
     </a>
</div>
<div class='baguetteBox2'>
     <a href='/test2.jpg'>  <!-- 路径为原图 -->
        <img src='/test2_s.jpg'>  <!-- 显示为缩略图 -->
     </a>
</div>
<script src="baguetteBox.js"></script>

　　

JS

//执行点击图片弹窗
if(typeof oldIE === 'undefined' && Object.keys)
  hljs.initHighlighting();
baguetteBox.run('.baguetteBox1');    //不要对同一个baguetteBox执行多次run
baguetteBox.run('.baguetteBox2');

　　

效果：

baguetteBox下载

示例代码下载