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

2011-04-14 8 条评论 10,737 次阅读被赞了 0 次

[隐藏]

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包：

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

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

本作品采用知识共享署名-相同方式共享 4.0 国际许可协议进行许可

龙龙说道：

2012年04月12日 8:10 下午

// 选择id为gallery下的所有链接
这段代码测试成功
但文章内容图片一般都不会带A属性,按照你下面自动增加A属性的代码不成功,把代码复制到Dreamweaver上显示 <![CDATA[ 这行代码出现错误,最后测试不成功.不知道博主代码是复制错了还是本身的问题
[reply=任侠,2012-04-13 09:17 AM]注意代码中的#logPanel 是日子内容包含图片的DIV的ID标志，你应该针对自己测试的情况对应修改[/reply]
[reply=任侠,2012-04-13 09:52 AM]我明白了原因，是最后少了一个结尾括号：
})//<!–end–>
]]>
</script>[/reply]

回复
iioo说道：

2012年04月4日 11:47 下午

hi，看了博主的文章，很是激动，一步一步照着做，可是没有效果，所以还要请教大哥啊：）

1是，那个官方下载下来的文件是放在网站根目录，还是主题里还是wordpress的includ里的js里》》??

2是有两个功能可以只用其中一个，还是两个必须》》？

不懂。

多谢啊！！
[reply=任侠,2012-04-06 11:15 AM]问题一：因为使用了绝对路径，所以要放到网站根目录；
问题二：1部分为介绍，仅供参考了解。你只需要按照2部分逐步做即可。
注意代码中的#logPanel 是日子内容的DIV的ID标志，你可以查看自己使用主题里日子内容div的ID，对应的修改下即可。[/reply]

回复
jack说道：

2012年03月27日 5:48 下午

我怎么没有设置正确呢？没有效果！到底是在哪个文件中的<head></head>之间添加呢？是不是在header.asp文件中？
[reply=任侠,2012-04-06 11:15 AM]你说的是对的，就是那样[/reply]

回复
cc说道：

2012年03月23日 4:14 上午

蛮漂亮的学习啦~~~~~~

回复
河河说道：

2011年08月6日 12:23 上午

为什么我设置不成呢，[face_11]

回复
seopk说道：

2011年04月17日 6:42 上午

我喜欢第一张那个女的，内容也不错，学习了，有好几天没来了

回复
威言威语说道：

2011年04月15日 10:06 下午

WordPress倒是有好几个这样的插件~
[reply=任侠,2011-04-15 09:37 PM]这个也不算什么插件吧，简单的哪儿都能用
只是有一点是，这样修改后不用修改文章内容，效果就添加上了[/reply]

回复
MM部落格说道：

2011年04月14日 11:42 下午

盖楼

回复
性感美女说道：

2011年04月14日 11:41 下午

挺漂亮的美女··

回复

0 无关的牢骚一堆

1 jquery-lightbox简介

1.1 JQuery Lightbox的使用方法

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

相关文章:

本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可

发表回复 取消回复

本作品采用知识共享署名-相同方式共享 4.0 国际许可协议进行许可

发表回复取消回复