Blogger 安装 Lightbox
2013-07-26补充：为了加载速度，我将 js 代码写入博客自带的 widget 中了。这样一来 template 也短了不少。但是 css 还是只能原地不动。
Lightbox，通俗点来解释就是点击带链接的图片后，不是打开新窗口，而是在原有页面上弹出一个窗口显示图片。这对于用户来说是很好的体验，不需要返回原页面或者关掉新页面等大幅度移动鼠标的动作。而随着 Lightbox 的广泛被使用，功能也相应增多，比如带有描述文字、上一张下一张按钮、幻灯片功能、分享按钮等等。说来心痛，其实 Blogger 自带 Lightbox 功能的，而且还有缩略图导航，要不是那个什么，也不需要把 Blogger 的 js 注释掉，这个功能就不会没作用了。现在只好转向外援，好在各路大神们提供了不少方法，今天我就介绍一下几种主流的和本博现在安装的 Lightbox。
jQuery lightBox plugin
我记得我第一次看到的 Lightbox 好像就是这个，对其 UI 还有种亲切感。官网上的介绍非常详细，示例、安装方法、自定义修改等等仔细看看都没有太大问题。最大的问题就是下载链接失效，但这也很好解决，因为既然官网上有示例，说明这个插件还能运作，果断右键还能取得（可能是）最新的版本。
fancyBox
其实对于 fancyBox 我也是了解的，因为 Instapress 的 Lightbox 效果用的就是它。fancyBox 功能强大到令人发指，除了单张照片、组图，甚至还能包含视频、谷歌地图，另外还能增加缩略图导航条、按钮条等等。安装方法和各种变形都一字不落地介绍在官网上了，大家细细品味吧。
Lightbox2
最后我选择了它，虽然没有 fancyBox 功能多（特别是我挺想要缩略图导航条的），但相应地也比较简单（追求简单还使我从 WordPress 搬回 Blogger）。我觉得 fancyBox 比较适合做大网站时候运用，就像 WordPress 一样，只有你想不到的，没有它做不到的。但我这就是个个人小博客，不想弄得太复杂（虽然已经很复杂了），所以看在 Lightbox2 简单好用的份上，我也愿意大致介绍一下安装过程。
独立博客
如果你有自己的主机，直接把官网上下载的 lightbox.js 和 lightbox.css 分别上传到对应主题下的 js 和 css 目录中（你也可以传到其他目录，重要的是引用的时候要找准位置），注意检查以下几个文件位置是否正确，能否正常显示：prev.png、next.png、loading.gif、close.png。接着在 </head> 前引用 css 如下：
<link href="css/lightbox.css" rel="stylesheet" />
在 </body> 之后 </html> 之前引用 js 如下：
<script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'/>
<script src="js/lightbox.js"></script>
最后，想要使用 Lightbox 的话，就在 <a> 标签里加上 rel="lightbox"，比如：
<a href="img/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
title 里的描述会显示在图片下方。如果你想要发组图，那么就把写成 rel="lightbox[组图名称]"，这样几张图就会被识别为同一组。
Blogger
如果你和我一样，用的是 Blogger，那么你同样可以用以上的方法，只是你需要找地方放置 lightbox.js 和 lightbox.css 文件，并在引用中更改地址。同时也不要忘记修改那几个图标的地址。或者，你想尝试一下我现在正在使用的“笨办法”？
我原本就没有引用外部 css 文件，所以这次也只是把代码继续塞进 <style type='text/css'></style> 中，另外因为显示速度等原因修改或增加了一些参数：
/* Lightbox
----------------------------------------------------------------*/
#lightboxOverlay {
position: absolute;
top: 0;
left: 0;
z-index: 9999;
background-color: black;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=85);
opacity: 0.85;
display: none;
}
#lightbox {
position: absolute;
left: 0;
width: 100%;
z-index: 10000;
text-align: center;
line-height: 0;
font-family: "lucida grande", tahoma, verdana, arial, sans-serif;
font-weight: normal;
}
#lightbox img {
width: auto;
height: auto;
}
#lightbox a img {
border: none;
}
.lb-outerContainer {
position: relative;
background-color: white;
*zoom: 1;
width: 250px;
height: 250px;
margin: 0 auto;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
}
.lb-outerContainer:after {
content: "";
display: table;
clear: both;
}
.lb-container {
padding: 10px;
}
.lb-loader {
position: absolute;
top: 40%;
left: 0%;
height: 25%;
width: 100%;
text-align: center;
line-height: 0;
}
.lb-nav {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
}
.lb-container > .nav {
left: 0;
}
.lb-nav a {
outline: none;
}
.lb-prev, .lb-next {
width: 49%;
height: 100%;
background-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
/* Trick IE into showing hover */
display: block;
}
.lb-prev {
left: 0;
float: left;
}
.lb-next {
right: 0;
float: right;
}
.lb-prev:hover {
background: url("http://pic.yupoo.com/ccyann/CZrMyo01/medish.png") left 48% no-repeat;
}
.lb-next:hover {
background: url("http://pic.yupoo.com/ccyann/CZrMv6m2/medish.png") right 48% no-repeat;
}
.lb-dataContainer {
margin: 0 auto;
padding-top: 5px;
*zoom: 1;
width: 100%;
-moz-border-radius-bottomleft: 4px;
-webkit-border-bottom-left-radius: 4px;
-ms-border-bottom-left-radius: 4px;
-o-border-bottom-left-radius: 4px;
border-bottom-left-radius: 4px;
-moz-border-radius-bottomright: 4px;
-webkit-border-bottom-right-radius: 4px;
-ms-border-bottom-right-radius: 4px;
-o-border-bottom-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.lb-dataContainer:after {
content: "";
display: table;
clear: both;
}
.lb-data {
padding: 0 10px;
color: #bbbbbb;
}
.lb-data .lb-details {
width: 85%;
float: left;
text-align: left;
line-height: 1.1em;
}
.lb-data .lb-caption {
font-size: 13px;
font-weight: bold;
line-height: 1em;
}
.lb-data .lb-number {
display: block;
clear: left;
padding-bottom: 1em;
font-size: 11px;
}
.lb-data .lb-close {
height: 30px;
line-height: 0.5;
font-size: 40px;
float: right;
outline: none;
}
.lb-data .lb-close:hover {
cursor: pointer;
}
.lb-image {
max-width: none !important;
}
同时不要脸地在末尾把 js 也直接输入了。
<script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'/> /*引用js*/
<script>//<![CDATA[
js代码在此
//]]></script>
注意：//<![CDATA[ 和 //]] 部分非常重要，如果没有的话直接写入的 js 代码无法作用。
现在我的 Template 很长，很长……没办法，为了我的 Blogger 可以不依赖第三方而完整显示。当然如果你有可靠的存放文件的地方，还是不要学我罢。