Lightbox弹出层图片全屏展示jQuery插件

    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>	

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！