现在位置: 首页 / 网站建设 / jQuery / 正文

jQuery实现不修改内容为文章内的图片自动添加jquery-lightbox图片展示效果

目录
[隐藏]

0  无关的牢骚一堆

由于换了空间，原来的网站备案接入被注销，接着备案主体也被注销，于是网站关闭了一段时间。昨晚发现终于重新备案通过了，据空间客服说他们是每周二报送备案，那么审核通过就是只用了一天，确实很够速度。最近厄运不断，遭遇了历史以来最大的不幸，各种杯具不断的袭来，压的几乎快要垮掉。还好重备案没有太多曲折，还好我还活着。

下面介绍的是志文工作室重新备案后，第一次书写的折腾博客的功能效果（当然这个效果其实是很早就添加上了的）。喜好折腾有功夫折腾的朋友可拿去参考一下，如有更好的方式或建议，也欢迎拿来一起分享。

1  jquery-lightbox简介

相信很多人都应该接触过Lightbox JS 。Lightbox JS 是一个简单而又谦恭的用来把图片覆盖在当前页面上的脚本.就是一个页面上的弹出式对话框的组件， 它能被快速安装并且运作于所有流行的浏览器。
而 JQuery Lightbox 是Lightbox JS 的效果在 jQuery 框架的基础上实现版本。
JQuery Lightbox 基于 jQuery 框架开发，它的压缩版本只有7KB，使用也非常简单，你几乎不需要修改页面的代码，使用jquery的选择器，直接绑定lightBox方法就可以了。体积小，效果好，使用简单，是JQuery Lightbox 突出的特点。

1.1  JQuery Lightbox的使用方法

1.1.1 首先你需要获得jQuery Lightbox的所有文件。可从官方网站下载：
http://leandrovieira.com/projects/jquery/lightbox/

1.1.2 然后首先必须包含jquery包：

<script type="text/javascript" src="js/jquery.js">

1.1.3 接着还需要引入lightBox包以及样式文件：

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

1.1.4 最后就是根据需求绑定lightbox方法了。
下边的示例方法来自jQuery Lightbox官网。即是利用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>

2  简单jquery代码给文章内图片自动添加jquery-lightbox效果

通过上面的介绍，我们知道了jquery-lightbox简单而漂亮的功能。但是我们也注意到，每一个需要添加该效果的目标，都必须是一个连接。而问题是，在我们已有文章内插入的图片，一般是没有加上连接的，如果一篇篇去修改显然太笨。此外，每次添加图片，都要针对此额外添加连接，显然也很不方便。于是可以考虑使用脚本给那些图片自动加上希望的链接效果。jquery是简洁而强大的。
实现很简单，具体步骤如下：

2.1  需要利用jquery，首先载入jquery.js是必须的了。此外还需要载入jquery-lightbox的脚本和css。具体可根据你存放这些文件的位置，在<head></head>之间加入类似如下代码：

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

2.2  在<head></head>之间添加简单的jquery代码，实现给指定部分的图片添加特定的链接。具体代码类似如下（pjblog直接添加上即可），注意注释的说明部分。红色部分需要根据你的实际情况修改，或者删除也可。

 <script type="text/javascript">

<![CDATA[
        jQuery(document).ready(function ($) {
            //<!--JQuery实现图片添加链接-->
            $('#logPanel img').each(function (i) {    
//只对ID为logPanel的div内的图片操作（可根据实际情况修改，或去掉#logPanel ，即对页面内所有图片遍历操作）
                if (this.width > 80) {        //图片宽度大于80时才对其操作
                    $(this).wrap("<a href=" + $(this)[0].src + " class=lightbox></a>");
                    //给符合条件的图片加入自身的链接，加入jquery.lightbox的识别标志之一class=lightbox
                }
            });
            $("#logPanel a.lightbox").lightBox();   //添加lightbox效果，同样需注意#logPanel 的限制
        }); //<!--end-->
 ]]>
</script>

具体效果可参看志文工作室任一篇包含图片的文章。下面是几张示例，点击图片即可体验。

month_1109/0201191813148.JPG

 month_1112/g2011121103715.jpg