會令觀看者離開自己的部落格
使用者需要按上一頁回到剛才的頁面
非常不方便
所以使用 jQuery + jQuery Lightbox 做出圖片瀏覽效果
此程式碼會將同一個網誌內的圖片 Group 起來
令讀者更容易觀看同一網誌的所有圖片
原始碼如下:
$(document).ready(function(){
$.getScript("http://sites.google.com/site/lawrencespace/lawpronotes/js/jquery-lightbox/js/jquery.lightbox-0.5.pack.js", function(){
$("head").append($("<link>").attr({
rel: "stylesheet",
type: "text/css",
href: "http://sites.google.com/site/lawrencespace/lawpronotes/js/jquery-lightbox/css/jquery.lightbox-0.5.css",
media: "screen"
}));
$.each($("div.post > div.post-body"), function(i, $obj){
$.each($(this).find("a:has(img)"), function(){
if ($(this).attr("href").indexOf("amazon.com") == -1)
$(this).addClass("lightbox-group" + i).attr({
href: $(this).attr("href").replace(/s1600-h/g, "s1600")
});
});
$(".lightbox-group" + i).lightBox({
imageLoading: 'http://lh6.ggpht.com/_fDN8R2Wgbcs/S0ssv1y3SzI/AAAAAAAAATY/iHDlhd8Bh2I/lightbox-ico-loading.gif',
imageBtnPrev: 'http://lh4.ggpht.com/_fDN8R2Wgbcs/S0sswKFYiPI/AAAAAAAAATc/MVOjlOSzo0M/lightbox-btn-prev.gif',
imageBtnNext: 'http://lh3.ggpht.com/_fDN8R2Wgbcs/S0sswKD_xLI/AAAAAAAAATg/qXIr_Rz0aXw/lightbox-btn-next.gif',
imageBtnClose: 'http://lh5.ggpht.com/_fDN8R2Wgbcs/S0sswA_9xxI/AAAAAAAAATk/xzuKQ2IxRaM/lightbox-btn-close.gif',
imageBlank: 'http://lh4.ggpht.com/_fDN8R2Wgbcs/S0sswbEfeJI/AAAAAAAAATo/h-xbAY3J8MU/lightbox-blank.gif',
fixedNavigation: true,
overlayOpacity: 0.4,
containerResizeSpeed: 500
});
});
});
});
使用方法:請先在 Layout -> Edit HTML 找出以下的標籤
</head>在這個標籤前面加入以下程式碼
<script src="http://www.google.com/jsapi"/>
<script src='http://sites.google.com/site/lawrencespace/lawpronotes/js/blogger_lightbox.min.js'/>
按下儲存
然後回到主頁面測試一下
相關書籍:
