Lightbox弹出层图片全屏展示jQuery插件
- 作者：网页模板
- 大小：0.293MB
- 点击次数：
- 发布时间：2014-09-19 10:56
特效介绍
Lightbox弹出层图片全屏展示jQuery插件，点击图片后，会弹出图片放大的层，并且带有上一张下一张和播放、暂停按钮，使用也非常方便。使用方法
1、在head引入下面的js和css文件：<link rel=stylesheet type=text/css href="css/style.css" /> <script type="text/javascript" src="http://www.5imoban.net/download/jquery/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="js/jquery.colorbox-min.js"></script> <script type="text/javascript" src="js/5imoban.net.js"></script>2、在需要使用Lightbox图片展示效果的图片外面套一个a标签，如下：
<a href="images/eg2.jpg" rel="colorbox1" target="_blank">
<img src="images/eg2.jpg">
</a>
注意：1、a的rel不能缺少。
2、rel="colorbox1"和rel="colorbox2"不同，二者不会以上一张下一张的形式播放，所以，建议都用rel="colorbox1"，这样可以实现连续播放。
3、在html后面加入下面的js代码：
<script type="text/javascript">/*<![CDaTa[*/if(!isMobile()){document.write('<div class="imglist-button"><a target="_blank" class="colorbox_btn" href="images/eg1.jpg" rel="colorbox"></a><div class="imglist-dots"><a target="_blank" href="images/eg2.jpg" rel="colorbox"></a><a target="_blank" href="images/eg3.jpg" rel="colorbox"></a></div></div>');}/*]]>*/</script>
<script type="text/javascript">/*<![CDaTa[*/if(!isMobile()){$(document).ready(function(){$("a[rel^='colorbox']").colorbox({title:" ",slideshow:true,slideshowauto:false,previous:"上一张",next:"下一张",close:"关闭",slideshowStart:"播放",slideshowStop:"暂停",current:"第 {current} 张 (共{total}张)"});});}/*]]>*/</script>
- 本文标签：
- Lightbox弹出层,Lightbox图片展示
