Beyond the barrier: Blogger Hack - LightBox顯示圖片

2007-06-27

Blogger Hack - LightBox顯示圖片

Lightbox功能，字面上可能不太明白是什麼，要知道有多華麗就按以下這圖

想得到這種效果嗎？就跟著步驟．．．
STEP:1
到範本(templates)>Edit Html，再找以下代碼

]]></b:skin>
</head>
<body>
將以下的script插入到]]></b:skin>與</head>之間。
<link href="'http://klcintw.css.googlepages.com/lightbox.css'" media="'screen'" rel="'stylesheet'" type="'text/css'/> <script src="'http://klcintw.js.googlepages.com/prototype.js'" type="'text/javascript'"></script> <script src="'http://klcintw.js.googlepages.com/scriptaculous.js?load=" type="'text/javascript'"></script> <script src="'http://klcintw.js.googlepages.com/lightbox.js'" type="'text/javascript'"></script>

STEP:2
於每次貼圖時插入此Script
<a href="http://img228.imageshack.us/img228/6883/104357ao3.jpg" rel="lightbox"><img src="http://img228.imageshack.us/img228/6883/104357ao3.th.jpg" /></a>
小圖的url是http://img228.imageshack.us/img228/6883/104357ao3.th.jpg，而大圖的url是 href="http://img228.imageshack.us/img228/6883/104357ao3.jpg,每次想用到lightbox時就用這貼圖方法就可以了。

最後如果在blog第二頁後不能使用lightbox功能就請在</body>前面加上以下片段。

轉自良大的大秘寶

Beyond the barrier

2007-06-27

Blogger Hack - LightBox顯示圖片

沒有留言:

發佈留言

Since 5.2007