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‘);
效果:

原文:http://www.cnblogs.com/leap/p/4993355.html