|
Lightbox——新穎實(shí)用的顯示圖片效果
“Lightbox”是一個(gè)別致且易用的圖片顯示效果，它可以使圖片直接呈現(xiàn)在當(dāng)前頁(yè)面之上而不用轉(zhuǎn)到新的窗口。文字表述顯然不夠明了，所以請(qǐng)先看一下 Lightbox 的演示頁(yè)面。
如何使用？
Lightbox能非常簡(jiǎn)單地應(yīng)用到您的頁(yè)面上。首先將lightbox.js包含到您頁(yè)面的header部分：
<script src="lightbox.js" type="text/javascript"></script>
將rel="lightbox"屬性加入到任何有鏈接的標(biāo)記里面用以激活Lightbox功能，例如：
<a title="my caption" href="images/image-1.jpg" rel="lightbox">image #1</a>
也許您注意到了上面那個(gè)例子中，當(dāng)“打開(kāi)”圖片時(shí)會(huì)看到圖片下面有一段說(shuō)明文字。這是由title屬性控制的。title屬性是一個(gè)可選項(xiàng)，也就是說(shuō)您可以不寫，當(dāng)然最好還是簡(jiǎn)短的說(shuō)明一下比較好。
怎樣定制？
可以使用CSS來(lái)對(duì)“圖片層”進(jìn)行修飾，在上面的那個(gè)示例頁(yè)面中，我們采用了以下CSS代碼：
#lightbox{
background-color:#eee;
padding: 10px;
border-bottom: 2px solid #666;
border-right: 2px solid #666;
}
#lightboxDetails{
font-size: 0.8em;
padding-top: 0.4em;
}
#lightboxCaption{ float: left; }
#keyboardMsg{ float: right; }
#lightbox img{ border: none; }
#overlay img{ border: none; }
想要產(chǎn)生陰影效果的話，需要準(zhǔn)備一張半透明的PNG圖片和少許CSS。由于IE對(duì)PNG圖形的糟糕支持（它不支持PNG透明）我們不得不針對(duì)它寫更多的代碼：
#overlay{ background-image: url(overlay.png); }
* html #overlay {
background-color: #000;
back\ground-color: transparent;
background-image: url(blank.gif);
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="overlay.png", sizingMethod="scale");
}
lightbox.js有一句var loadingImage = 'loading.gif';它是用來(lái)控制圖片完全加載之前的那個(gè)“Loading...”效果的，你可以使用任何來(lái)圖片替代它。
同樣的，var closeButton = 'close.gif';用以控制“關(guān)閉”按鈕的圖片來(lái)源。
下載
lightbox.js - Javascript主文件
lightbox.css - “圖片層”樣式文件
overlay.png - 80% 透明度PNG圖片，用以實(shí)現(xiàn)陰影效果
loading.gif - “Loading”圖片
close.gif - “關(guān)閉” 按鈕
出處：藍(lán)色理想
責(zé)任編輯：moby
◎進(jìn)入論壇網(wǎng)頁(yè)制作、網(wǎng)站綜合版塊參加討論
|
