共计 2481 个字符，预计需要花费 7 分钟才能阅读完成。
提醒：本文最后更新于2013-03-20 11:40，文中所关联的信息可能已发生改变，请知悉！
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> |
具体效果可参看志文工作室任一篇包含图片的文章。下面是几张示例，点击图片即可体验。
