说明文档 引入资源,(JQ1.3+)和JS文件.
1 2 3 4 5 6 7 8 9 10 11 12 13 | < script type = "text/javascript" src = "js/jquery.min.js" ></ script > <!--lightbox开始--> < link rel = "stylesheet" type = "text/css" href = "js/lightbox/themes/default/jquery.lightbox.css" /> <!--[if IE 6]> <link rel="stylesheet" type="text/css" href="js/lightbox/themes/default/jquery.lightbox.ie6.css" /> <![endif]--> < script type = "text/javascript" src = "js/lightbox/jquery.lightbox.min.js" ></ script > < script type = "text/javascript" > jQuery(document).ready(function($){ $('.lightbox').lightbox(); }); </ script > <!--结束--> |
1 | < a href = "images/a1.jpg" class = "lightbox" >这是一个最简单的弹层</ a > |
1 2 3 | < a href = "images/a1.jpg" class = "lightbox" rel = "pic" >数组类设置属性"rel"</ a > < a href = "images/a1.jpg" class = "lightbox" rel = "pic" >数组类设置属性"rel"</ a > < a href = "images/a1.jpg" class = "lightbox" rel = "pic" >数组类设置属性"rel"</ a > |
1 | < a href = "images/a1.jpg?lightbox[width]=400&lightbox[height]=400" class = "lightbox" >弹出层固定大小</ a > |
1 | < a href = "images/a1.jpg?lightbox[maximized]=true" class = "lightbox" >弹出层随浏览器窗口滚动</ a > |
1 2 | < a href = "test.html?lightbox[width]=350&lightbox[height]=170" class = "lightbox" >弹出层加载html文件,注意需要指定层大小</ a > < a href = "http://player.youku.com/player.php/sid/XNzU0NjEzODU2/v.swf?lightbox[width]=700&lightbox[height]=400" class = "lightbox" >弹出层加载swf视频文件,注意需要指定层大小</ a > |