[jQuery Plugin] jquery_lightBox 圖片顯示效果

分類: jQuery|技術分享 作者: daniel

31 3 月 2009

DEMO

原始網站:http://leandrovieira.com/projects/jquery/lightbox/

一般網頁上圖片的展示,很難讓人不聯想到 Lightbox 這個 Prototype 的燈箱特效。可惜的是 jQuery 與 Prototype 犯沖,沒辦法直接引用這個基於 Prototype 寫成的外掛。雖然如此,這麼經典的覽圖介面 jQuery 怎麼會放過呢?所以,jQuery lightBox plugin 就因此誕生了!

使用的方式非常簡單,一開始先建立簡單的圖片連結:

<a class="lightbox" href="http://blog.wabow.com/wp-content/uploads/2009/03/seekattention-500x303.png" title="[jQuery Plugin] seekAttention 製作閃爍的焦點效果"><img border="0" src="http://blog.wabow.com/wp-content/uploads/2009/03/seekattention-500x303.png" width="200" alt="[jQuery Plugin] seekAttention 製作閃爍的焦點效果" border="0"></a><br />
seekAttention 製作閃爍的焦點效果<br />
<a class="lightbox" href="http://blog.wabow.com/wp-content/uploads/2009/03/tablesorter-500x303.png" title="[jQuery Plugin] tablesorter 表格排序效果"><img border="0" src="http://blog.wabow.com/wp-content/uploads/2009/03/tablesorter-500x303.png" width="200" alt="[jQuery Plugin] tablesorter 表格排序效果" border="0"></a><br />
tablesorter 表格排序效果<br />
<a class="lightbox" href="http://blog.wabow.com/wp-content/uploads/2009/03/lightbox-500x303.png" title="[jQuery Plugin] jquery_lightBox 圖片顯示效果"><img border="0" src="http://blog.wabow.com/wp-content/uploads/2009/03/lightbox-500x303.png" width="200" alt="[jQuery Plugin] jquery_lightBox 圖片顯示效果" border="0"></a><br />

接下來載入 jQuery 以及 lightBox:

<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>

然後插入 JavaScript:

<script type="text/javascript">
$(function() {
 
	$('a.lightbox').lightBox();
 
});
</script>

呈現的效果如下:lightbox 呈現效果

範例程式下載

我自己對 lightbox 燈箱特效的喜愛非常濃厚,甚至為了「為什麼所有的相簿網站都不採用燈箱特效?」而感到生氣!能夠不換頁達到瀏覽照片的效果,這不是超棒的功能嗎?jQuery lightBox plugin 其他還有很多參數可以設定,如遮罩的顏色、顯示的圖片等,範例只用了最基本的效果;有興趣的人可以參考網站參數設定 的部分。

我要留言

關於這裡

這個部落格分享了哇寶在電子商務領域的技術及資訊,希望能讓更多人一起為台灣的網路產業加油。