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

点赞 (0)
  1. 龙龙说道:

    // 选择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]

  2. iioo说道:

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

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

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

    不懂。

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

  3. jack说道:

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

  4. cc说道:

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

  5. 河河说道:

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

  6. seopk说道:

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

  7. 威言威语说道:

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

  8. 性感美女说道:

    挺漂亮的美女··

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据