FacyBox是一款基于jquery的lightbox控件,它可(kě)以讓你(nǐ)在你(nǐ)的網站(zhàn)上(shàng)展示圖片(可(kě)以浏覽多(duō)張圖片,支持鍵盤方向鍵)、Div或通(tōng)過Ajax加載的內(nèi)容,而且使用非常簡單。
一起來(lái)看看如何使用。
1、添加javascript引用和(hé)css文件的引用
2、HTML
圖片:
多(duō)張圖片浏覽:
點擊這裏
當要浏覽多(duō)張圖片時(shí),隻需給鏈接指定一個(gè)ID(如上(shàng):id="open"),通(tōng)過JS單擊事件來(lái)加載圖片源。
DIV:
點擊這裏
展示DIV時(shí),需要在頁面對應一個(gè)DIV,并設置id="info",隐藏style="display:none",如下:
點擊這裏
A jQuery-based, which can display images, divs, or entire remote pages.
ajax加載內(nèi)容
點擊這裏
3、調用插件
$(function(){
$('a[rel*=facybox]').facybox();
$("#open").click(function(){ //展示多(duō)張圖片
$.facybox({images:['images/3s.jpg','images/4s.jpg','images/5s.jpg']});
});
});
FacyBox使用簡單,能滿足網站(zhàn)設計(jì)的一般要求,但(dàn)是如果你(nǐ)想要更豐富的效果,更高(gāo)層次的要求,可(kě)以用到另一個(gè)插件:Fancybox,這個(gè)插件非常強大(dà),我會(huì)在後面的博文中提到,敬請(qǐng)關注。