範例圖
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'/> |
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程式原作官網
沒有留言:
張貼留言