首页 > 其他 > 详细

画廊插件baguetteBox

时间:2015-11-25 00:19:19      阅读:353      评论:0      收藏:0      [点我收藏+]

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下载 

示例代码下载

 

画廊插件baguetteBox

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!