894° Jul 08, 2013 09:23 • 2013 • 1,460字 • 0条评论

Blogger 安装 Lightbox

jQuery lightBox plugin
fancyBox
Lightbox2
- 独立博客
- Blogger

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

EOF