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 可以不依赖第三方而完整显示。当然如果你有可靠的存放文件的地方,还是不要学我罢。