September 1,2008

[AJAX] jQuery 的 lightBox

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

基本上官方網站已經講的非常清楚了,使用方法也跟 Lightbox 非常類似;不過更方便,也更有彈性。只要在需引用的網頁中載入:

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

之後,寫一隻小小的 JavaScript 於頁面中:

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

就可以完全相容 Lightbox 的使用環境,無痛移植。此外,jQuery lightBox plugin 提供很多可以自訂的參數,自由度提高許多!


Posted by taikobo0 at 樂多Roodo! │10:23 │回應(1)引用(0)AJAX
樂多分類:日記/一般 工具:編輯本文
Ads by Roodo! 

引用URL

http://cgi.blog.roodo.com/trackback/7082729
回應文章
感謝分享唷

這真是方便呀...
Posted by cipper tech at January 7,2009 14:59