快捷導(dǎo)航

jQuery Lightbox 圖片展示插件使用說(shuō)明

更新時(shí)間：2010年04月25日 17:17:38 作者：

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

一、信息
原作者：Benjamin Arthur Lupton
當(dāng)前版本：v1.3.7最終版
發(fā)布日期：2009年4月25日
項(xiàng)目地址：http://jquery.com/plugins/project/jquerylightbox_bal
翻譯編輯：張?chǎng)涡?zhangxinxu)

二、安裝
在您頁(yè)面的頭部head中嵌入如下如下代碼鏈接必須的JavaScript文件。 <script type="text/javascript" src="js/jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="js/jquery.lightbox.packed.js"></script>

前面一個(gè)JavaScript文件表示JavaScript庫(kù)，后面一個(gè)是lightbox插件。這里的鏈接路徑根據(jù)您的實(shí)際情況進(jìn)行修改。

三、幫助
如果您在使用過(guò)程中遇到一些問(wèn)題無(wú)法解決，可以去這里http://plugins.jquery.com/project/issues/jquerylightbox_bal，可能會(huì)對(duì)您有所幫助。
四、參數(shù)

參數(shù)名	描述	參數(shù)值
show_helper_text	是否顯示一些提示文本，例如“點(diǎn)擊關(guān)閉”等	true（默認(rèn)，顯示）, false（不顯示）
show_info	是否顯示圖片的信息	"auto"（默認(rèn)）- 要鼠標(biāo)經(jīng)過(guò)才會(huì)自動(dòng)顯示, true - 強(qiáng)制顯示
show_extended_info	是否顯示圖片擴(kuò)展的些信息	"auto"（默認(rèn)）- 要鼠標(biāo)經(jīng)過(guò)才會(huì)自動(dòng)顯示, true - 強(qiáng)制顯示
download_link	是否顯示圖片下載的鏈接	true（默認(rèn)，顯示）, false（不顯示）
auto_resize	是否在圖片尺寸過(guò)大時(shí)進(jìn)行大小限制	true（默認(rèn)，限制）, false（不限制）
colorBlend	是否支持colorBlend（顏色混合）	null（默認(rèn)）- 僅當(dāng)colorBlend檢測(cè)到時(shí)可用, true - 導(dǎo)入colorBlend且使可用, false - 不支持colorBlend
ie6_support	是否支持IE6瀏覽器	true（默認(rèn)，支持）, false（不支持）
ie6_upgrade	是否給IE6用戶顯示升級(jí)提示信息	true（默認(rèn)，顯示）, false（不顯示）
show_linkback	是否顯示右上角的方向鏈接	true（默認(rèn)，顯示）, false（不顯示）
auto_scroll	如何對(duì)滾動(dòng)進(jìn)行處理	"follow"（默認(rèn)）- 與用戶一致, "disabled" - 不允許滾動(dòng), "ignore" - 忽略滾動(dòng)（讓lightbox停留在其最初的位置上）
speed	每次圖片轉(zhuǎn)換過(guò)渡的時(shí)間（毫秒）	400（默認(rèn)）, integer（整數(shù)）
baseurl	要使用的基本路徑用來(lái)自動(dòng)導(dǎo)入需要的文件	null（默認(rèn)）- 自動(dòng)檢測(cè), string - 要手動(dòng)添加的基本路徑
files	JavaScript中鏈接調(diào)用的一些文件，在這些文件（CSS、圖片等）重命名時(shí)使用	Children: js.lightbox, js.colorBlend, css.lightbox, images.prev, images.next, images.blank, images.loading
text	JavaScript中包含的一些文字，在您要翻譯的時(shí)候使用	Children: image, of, close, closeInfo, download, help.close, help.interact, about.text, about.title, about.link
keys	JavaScript文件中包含的些快捷鍵，在您想重新定義快捷鍵的時(shí)候使用	Children: close, prev, next
opacity	覆蓋背景層的透明度	0.9（默認(rèn)，90%的透明度）, 數(shù)值
padding	圖片四周的padding值	null（默認(rèn)）- 自動(dòng)檢測(cè), integer - padding的整數(shù)值
rel	鏈接上要搜尋的rel值，用以應(yīng)用lightbox效果	"lightbox"（默認(rèn)）- 默認(rèn)搜尋rel="lightbox", string - 應(yīng)該搜尋的rel字符串
auto_relify	是否對(duì)rel進(jìn)行一個(gè)初始化的掃描自動(dòng)檢測(cè)lightboxes	true（默認(rèn)）, false

五、參數(shù)的應(yīng)用
有兩個(gè)方法使用這些參數(shù)：一是通過(guò)js鏈接，而是通過(guò)js代碼。例如下面的例子，分別用著兩個(gè)方法將JavaScript文件中的反向鏈接隱藏同時(shí)將文件中的“圖片”文字改成“照片”。
1. 鏈接修改法

復(fù)制代碼代碼如下:

 
<script type="text/javascript" src="js/jquery.lightbox.min.js?show_linkback=false&text.image=Photo"></script> 

2. 代碼修改法(construct)

復(fù)制代碼代碼如下:

 
<script type="text/javascript" src="jquery_lightbox/js/jquery.lightbox.packed.js"></script> 
<script type="text/javascript"> 
$(function(){ 
$.Lightbox.construct({ 
show_linkback: false, 
text: { 
image: '照片' 
} 
}); 
});</script> 

在線演示地址 http://demo.jb51.net/js/jquery_lightbox/index.html
打包下載地址 http://www.dbjr.com.cn/jiaoben/26042.html

您可能感興趣的文章: