2008年3月26日 星期三

運用Lightbox在Blogger顯示圖片

加入書籤: HemiDemi MyShare Baidu Google Bookmarks Yahoo! My Web Del.icio.us Digg technorati furl




範例圖



Step 1. 修改 Template


進「Template\Edit HTML」的畫面。請先備份(點擊 Download Full Template)。找到以下代碼。

]]></b:skin>







</head>







<body>





然後在</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=effects type='text/javascript'></script>

<script src='http://klcintw.js.googlepages.com/lightbox.js type='text/javascript'></script>









Step 2. 啟用LightBox程式的影像





在要套用Lightbox效果的圖片或連結加上「rel="lightbox"」並將href指向要顯示的內容url。如上面的範例中,小圖的url是href="http://picture/123.jpg",而大圖的url是href="http://picture/123.jpg" rel="lightbox"




若需要在展示大圖的「面版」底下顯示文字敘述,請將此敘述寫在title屬性裡面。














<a href="http://picture/123.jpg" rel="lightbox" title="此圖片的敘述寫在這裡"><img src="http://picture/123.jpg" /></a>








若要展示一連串相關群組的大圖,請採用底下的語法。在rel屬性中,用方刮號設定群組名稱(此例中的群組名稱叫做“roadtrip”),如此,當游標滑入影像範圍時,影像的右上或左上角就會出現“Next”(下一張)或“Prev”(上一張)文字:














<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>










lightbox程式原作官網

沒有留言:

EasyReadMore