特效介绍
Lightbox弹出层图片全屏展示jQuery插件,点击图片后,会弹出图片放大的层,并且带有上一张下一张和播放、暂停按钮,使用也非常方便。
使用方法
1、在head引入下面的js和css文件:
1 | < link rel = stylesheet type = text /css href = "css/style.css" /> |
3 | < script type = "text/javascript" src = "js/jquery.colorbox-min.js" ></ script > |
4 | < script type = "text/javascript" src = "js/5imoban.net.js" ></ script > |
2、在需要使用Lightbox图片展示效果的图片外面套一个a标签,如下:
1 | < a href = "images/eg2.jpg" rel = "colorbox1" target = "_blank" > |
2 | < img src = "images/eg2.jpg" > |
注意:
1、a的rel不能缺少。
2、rel="colorbox1"和rel="colorbox2"不同,二者不会以上一张下一张的形式播放,所以,建议都用rel="colorbox1",这样可以实现连续播放。
3、在html后面加入下面的js代码:
1 | <script type= "text/javascript" > 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> |
3 | <script type= "text/javascript" > if (!isMobile()){$(document).ready( function (){$( "a[rel^='colorbox']" ).colorbox({title: " " ,slideshow: true ,slideshowauto: false ,previous: "上一张" ,next: "下一张" ,close: "关闭" ,slideshowStart: "播放" ,slideshowStop: "暂停" ,current: "第 {current} 张 (共{total}张)" });});} </script> |
部分素材资源来源网站,本站提供免费下载,如有侵权请联系站长马上删除!