jQuery lightBox plugin for Bo-Blog

由404cn.net推薦的jQuery lightBox plugin for Bo-Blog,安裝方法相當簡單,無需修改特定程式代碼或文章內容。首先到jQuery lightBox plugin下載檔案。將檔案解壓縮,共有css、images、js三個資料夾,上傳至blog根目錄。將以下代碼複製到head區塊︰

1
2
3
4
5
6
7
8
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
<script type="text/javascript">
$(function() {
$(".textbox-content a:has(img)").lightBox();
});
</script>
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />

或是利用Google AJAX Libraries API來載入jQuery 1.2.3(因為jquery.js是此版本)︰
1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" language="javascript">
google.load("jquery", "1.2.3");
</script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
<script type="text/javascript">
$(function() {
$(".textbox-content a:has(img)").lightBox();
});
</script>
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />

儲存之後,隨便點擊一篇blog文章內的貼圖,就可以馬上看到效果。另外js資料夾中有jquery.lightbox-0.5.jsjquery.lightbox-0.5.min.jsjquery.lightbox-0.5.pack.js三個檔案,只知道檔案大小不同,影響javascript載入速度,至於開啟特效並不清楚有無其它差異。