星期六, 7月 21, 2007
星期二, 2月 06, 2007
[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"就可以了。
[blogger]隱藏Navbar
在範本中加上這些碼，自己將blogger的Navbar消失。
#navbar-iframe {
height:0px;
visibility:hidden;
display:none;
}
另一個是將navbar,不顯示只是mouseover自然會出現。
#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}
訂閱：
文章 (Atom)
文章
