[blogger]lightbox顯示圖片效果

Lightbox顯示圖片效果，只是按上面就會清楚了。

要實現這個效果只是兩個步驟就可以了。
　　
Step1:在＜head＞...＜/head＞之間插入下面code

<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=effects" type="text/javascript"></script>
<script src="http://klcintw.js.googlepages.com/lightbox.js" type="text/javascript"></script>
<script src="http://www.haloscan.com/load/klcintw4" type="text/javascript"> </script>


Step2:先準備一張大相片和一個細相片，然後插入細相片，同時連結大相片且加上rel="lightbox"。



<a href="大圖片路徑" rel="lightbox"><img src="細圖片路徑" />
</a>


若要加入一系列的效果，則輸入變為rel="lightbox[roadtrip]


<a href="images/image-1.jpg" rel="lightbox[roadtrip]">
image #1</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]">
image #2</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]">
image #3</a>

ps.利用blogger插入圖片更方便，只要在＜a＞中加入rel="lightbox"就可以了。