在blogspot上应用lightbox效果显示图片
Step 1. 修改 Template
进入「Template＼Edit HTML」界面。请先备份（点击 Download Full Template）。找到以下代码。
</b:skin>
</head>
<body>
在</head>前面加入如下代码：
<link href='http://address/lightbox.css' media='screen' rel='stylesheet' type='text/css'/>
<script src='http://address/prototype.js' type='text/javascript'></script>
<script src='http://address/scriptaculous.js?load=effects' type='text/javascript'></script>
<script src='http://address/lightbox.js' type='text/javascript'></script>
桔色部分是文件存储的共享外链地址
在</body>前面加入如下代码：
<script>
var WidgetManager_HandleControllerResult = _WidgetManager._HandleControllerResult;
_WidgetManager._HandleControllerResult = function() {
try {
WidgetManager_HandleControllerResult.apply(this, arguments);
initLightbox();
} catch(e) {}
}
</script>
Step 2.修改Post
在要使用Lightbox效果的图片或链接加上rel="lightbox"并将href指向要显示的內容url。如小图的url是href="http://picture/1.jpg"，而大图的url是href="http://picture/2.jpg" rel="lightbox"
如果需要在展示的大图的面板底下显示文字叙述，请将此叙述写在title属性里面。
完整的代码是：
<a href="http://picture/2.jpg" rel="lightbox"title="此图片的叙述写在这里"><img src="http://picture/1.jpg" /></a>
若要显示一连串相关群组的大图，请采用下面的语法。在rel属性中，用方括号设定群组名称（此例中群组名称叫做“a”），如此，当游标滑入如片范围时，图片的右上角或左上角就会出现“Next”或“Prev”文字：
<a href="images/image-1.jpg" rel="lightbox[a]"> image #1</a>
<a href="images/image-2.jpg" rel="lightbox[a]"> image #2</a>
<a href="images/image-3.jpg" rel="lightbox[a]"> image #3</a>
lightbox工具包下载地址见：Lightbox程序原作官网
