FaceBox執行畫面 |
使用方法:
首先載入檔案
//使用Google ajax API 直接連結 jQuery 1.7.2的min版本
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
//預設的仿照Facebook 對話窗的樣式
<link href="/facebox/facebox.css" media="screen" rel="stylesheet" type="text/css"/>
<script src="/facebox/facebox.js" type="text/javascript"></script>
JavaScript的部份放在Header裡面
<script type="text/javascript">
$(function() {
$('a[rel*=facebox]').facebox({ //A標籤擁有 rel=facebox 的元素執行
loadingImage : '../src/loading.gif',
closeImage : '../src/closelabel.png'
}); //參數會列在下表
});
</script>
最後建立HTML的片段就完成了
<a href="images/stairs.jpg" rel="facebox">連結圖片</a>
<a href="#info" rel="facebox">連結DIV元素</a> //ID為info
<div id="info" style="display:none;">DIV的內容</div>
<a href="remote.html" rel="facebox">連結遠端檔案</a>
//須放置有remote.html的檔案 並且在Service端執行才能看到AJAX的效果
附上可修改的參數
參數
|
預設值
|
說明 |
opacity
|
0.2
|
邊框的透明度 |
overlay
|
true
|
是否可以超過 |
loadingImage
|
/facebox/loading.gif
|
讀取時的圖片 |
closeImage
|
/facebox/closelabel.png
|
關閉的圖片 |
imageTypes
|
[ 'png', 'jpg', 'jpeg', 'gif' ]
|
允許的圖片類型 |
faceboxHtml
|
<div id="facebox" style="display:none;">
<div class="popup"> <div class="content"> </div> <a href="#" class="close"></a> </div> </div> |
Facebox的DIV元素 |
作者網站:http://defunkt.io/facebox/
檔案大小:162 KB(包含範例和所有的程式碼)
檔案下載:https://github.com/defunkt/facebox
檔案備份:下載
0 意見