Facebox 是基於 jQuery框架有Facebook風格的lightbox

by - 上午11:12

FaceBox執行畫面-A-Fu 網頁設計
FaceBox執行畫面
Facebox 是基於 jQuery框架有Facebook對話視窗風格的lightbox,可以顯示圖片網頁DIV元素或者整個遠端的頁面,檔案本身也不太大CSS加JavaScripts再加上圖片總共才13KB左右,使用方法也很簡單。


使用方法:
首先載入檔案
//使用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
檔案備份:下載


You May Also Like

0 意見