Amazon Ads

2013年11月28日 星期四

【筆記】Colorbox - 好用的jQuery燈箱插件 (jQuery lightbox plugin)

之前看同事已有採用Colorbox這個jQuery插件來做網頁燈箱,最近拜歐剛好有需要在網頁上實作燈箱的需要,終於能夠深入一探它的好用。

一進入到Colorbox的開發者網頁,就闡明Colorbox是「一個輕量級、可客製化的jQuery燈箱插件」 (A lightweight customizable lightbox plugin for jQuery),拜歐在使用的過程也是有這種體會:「好用」,那就直接來個初體驗吧!

因為是jQuery的插件,所以在引入前,應該先引入jQuery函式庫,先在<body>的最下方引入JS檔案:


另外記得在<head>引入css檔案:

接著加入一個button,等下用來觸發燈箱:


開始撰寫JS程式碼:
(function(){
 $('button').on('click', function(){
  $.colorbox({
   html : '

Hello lightbox!!!

', //在燈箱中要顯示的html字段 width : 700, //燈箱中間區塊的寬度 height : 600, //燈箱中間區塊的高度 onClosed : function(){ //當燈箱關閉時的callback funtion alert('Lightbox is closed'); } }); }); })();

上列中要傳入的參數其實滿多的,以方便客製化,除了在燈箱中可以放入字段,也可以顯示照片,或嵌入一個iframe,詳細參數列表,可以參考上列的開發者網站。

執行後的結果如:


拜歐在上列的程式碼中,有加入一個onClosed的callback function,就是在燈箱關閉後,會去執行,在此練習,就是直接altert一段訊息。

關閉上列的燈箱後,接著就會跳出下列訊息:


練習程式碼下載