jQuery Lightbox（balupton版）圖片展現插件demo

link:http://www.zhangxinxu.com/jq/balupton_zh/demo/

官網：http://leandrovieira.com/projects/jquery/lightbox/

jQuery Lightbox（balupton版）圖片展現插件demo

1、Lightbox Tour

<script type="text/javascript" src="js/jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="js/jquery.lightbox.packed.js"></script>
<a href="http://image.zhangxinxu.com/image/study/s/s512/mm1.jpg" rel="lightbox-tour" title="張含韻小美女">

簡要說明

• 這裏a標籤的rel值是lightbox-tour，JavaScript文件經過a標籤的rel屬性自動判斷是否要執行lightbox效果
• 顯示的圖片信息來自a標籤的title屬性，title內部的文字經過英文的":"冒號屬性區分描述的標題和內容，標題樣式爲粗體，默認含圖片連接，內容文字粗細正常，原項目CSS中此處字體大小爲10px，可是對於中文而言，10px偏小，因此我已經改成12像素。
• 大圖的連接地址直接寫在a標籤的href上，有時HTML DOM tree還沒有徹底加載是點擊a標籤會直接打開圖片，能夠用name代替href解決這一問題，需修改原JavaScript文件。

2、自動建立lightbox組

<a href="http://image.zhangxinxu.com/image/study/s/s512/mm1.jpg" rel="lightbox-myGroup" title="張含韻小美女">

簡要說明

• 這裏a標籤的rel值是lightbox-myGroup，所謂分組，就是JavaScript會將rel屬性一致的a標籤劃分爲一組。只要a標籤的rel屬性以"lightbox- * "爲結構。均可以觸發lightbox效果。因此這裏的效果與上面Lightbox Tour是同樣的，這裏的rel改成"lightbox-my"也是同樣的效果。

3、獨立的lightbox效果

<a href="http://image.zhangxinxu.com/image/study/s/s512/mm1.jpg" rel="lightbox" title="張含韻小美女">

簡要說明

• 與上面分組示例惟一的差異就是這裏a標籤的rel值是lightbox，沒有任何後綴。這裏的lightbox就是關鍵，當rel爲lightbox時，JavaScript會將此a標籤下的img圖片看成一個獨立的個體來處理，即沒有「上一張」，「下一張」的圖片切換。

4、手動建立分組

<a href="http://image.zhangxinxu.com/image/study/s/s512/mm1.jpg" title="張含韻小美女">

$(function(){
	$("#manualGroup a").lightbox();		   
});

簡要說明

• 這裏與上面不一樣，上面的實例都是經過a標籤的rel值判斷是不是要應用lightbox效果。而這裏沒有rel屬性，是手動建立分組，方法就是$("選擇器").lightbox();
• 本實例能夠說是最簡單的手動建立lightbox效果的例子了，lightbox效果還有其餘的些方法，下面會有簡要介紹。

5、一些參數使用舉例

<a href="http://image.zhangxinxu.com/image/study/s/s512/mm1.jpg" title="張含韻小美女">

$(function(){
    $("#paramsTest a").lightbox();	
    //------------------     $.Lightbox.construct({
        show_linkback: false,
        opacity: 0.6,
        text: {
            image: '照片'
        }
    });		   
});

簡要說明

• 這裏示例的幾個參數有三個，依次表示：是否顯示右上角的反向連接（false不顯示），黑色覆蓋層透明度（0.6，默認是0.9），其中的一個文字替換爲「照片」（原來是「圖片」，原項目js中爲"image"）
• 爲了顯示效果是因爲這裏的點擊失效的，因此js代碼中添加了一個簡單的判讀。
• 此插件參數總共將近20個，關於這些參數的些詳細信息您能夠點擊這裏。