内容页图片添加jquery-lightbox展示特效(点击放大)-1、下载 JQuery Lightbox 2、解压后 在需要展示的页面添加JS及CSS文件

海南网站建设,网页设计
记忆工作中的点滴
首页>> 网站特效 >>内容页图片添加jquery-lightbox展示特效(点击放大)

1、下载 JQuery Lightbox

2、解压后 在需要展示的页面添加JS及CSS文件

    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
    <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />

 3、这一步式最关键的,也就是对页面的文章进行调用,jquery-lightbox默认有多种调用方式,我们可以自由发挥(在这里,我选择的就是第二种方式):

<script type="text/javascript">  
         $(function() {  
         // 第一种选择  
         $('a[@rel*=lightbox]').lightBox(); // 选择所有的rel为lightbox的链接  
        // 第二种选择  
         $('#gallery a').lightBox(); // 选择id为gallery下的所有链接  
        // 第三种选择  
        $('a.lightbox').lightBox(); // 选择所有class为lightbox的链接  
        // 第四种选择  
        $('a').lightBox(); // 选择页面中所有的链接  
        //…………还有更多的选择,发挥你的想象力吧  
    });  
    </script>  

实例请下载压解包


×

感谢您的支持,我们会一直保持!

扫码支持
请土豪扫码随意打赏

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

打赏作者
版权所有,转载注意明处:不懂戀愛魚兒 » 内容页图片添加jquery-lightbox展示特效(点击放大)
标签: jquery lightbox

发表评论

路人甲 表情
看不清楚?点图切换 Ctrl+Enter快速提交

网友评论(0)