特效介绍
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>