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');
效果:
![](https://img.laitimes.com/img/__Qf2AjLwojIjJCLyojI0JCLicmbw5yN4YDO3ATNzkTMtYDNwMzM5MzMyQjMxETNxAjMtkzM0kjM38CXxETNxAjMvwVOzQTOyczLcd2bsJ2Lc12bj5ycn9Gbi52YuUTMwIzcldWYtl2Lc9CX6MHc0RHaiojIsJye.png)
baguetteBox下载
示例代码下载
消息:新博客地址 blog.leapmie.com,以后的更新都会在新博客首发,感谢支持~(园子视情况更新)