使用FancyBox燈箱效果呈現圖片，無法顯示圖片
小蛙的最近一個工作中，要讓使用者點了縮圖之後可以透過燈箱效果開啟大圖並且上下頁切換，之前小蛙試過很多種燈箱效果套件，舉凡是colorbox, fancybox, lightbox, thinbox, thickbox, greybox … 等(小蛙沒記錯的話應該試了有十種)，為什麼要是那麼多種呢？不是效果不好，每個套件都有自己獨特的做法，但呈現出來的效果大致上是差不多的，會嘗試那麼多種的原因在於圖片讀取的方式，這篇文章紀錄一下使用FancyBox讀不到圖片時的小技巧。
fancybox的使用方式很簡單，只要到fancybox官網點選右上角的Download就可以開始下載，解壓縮後可以看到有一個index.html，點開來就可以看到範例了。這邊以官方的說明文件簡單列出基本使用方法。
<!-- 這邊很方便只要多載入 jquery 就可以使用 --> <!-- 如果懶得自己下載就把這行貼上，使用google的 --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <!-- 套件主程式 --> <script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script> <!-- 載入fancybox css --> <link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
以上這些code都是放在<head> 放在這 </head>，另外有一些其他選項。
<!-- 如果要用滑鼠中間的滾輪控制圖片上下張，要新增這個 --> <script type="text/javascript" src="./fancybox/jquery.mousewheel-3.0.4.pack.js"></script> <!-- 如果要其他切換效果 --> <script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script>
接下來是建立點了會跳出燈箱的連結。
<!-- 這種是單一圖片的，href及src換成自己的圖片位置 --> <a id="single_image" href="image_big.jpg"><img src="image_small.jpg" alt=""/></a> <!-- 這種是多張圖片的(gallery)，href及src換成自己的圖片位置 --> <a rel="example_group" href="./example/11_b.jpg" title=""><img alt="" src="./example/11_s.jpg" /></a> <a rel="example_group" href="./example/12_b.jpg" title=""><img alt="" src="./example/12_s.jpg" /></a> <a rel="example_group" href="./example/13_b.jpg" title=""><img alt="" src="./example/13_s.jpg" /></a>
要以Gallery(相簿)方式呈現，只要在<a>中加一個rel的屬性就可以了，rel全部設相同就會在同一個Gallery群組。這邊要注意的是如果有設定id屬性，千萬不可以有重複名稱！接下來到最後一個步驟了，呼叫fancybox()讓這些設定「活」起來。
// 讓單一圖片活起來
$("a#single_image").fancybox();
// 讓gallery活起來，titleFormat是圖片下方要呈現的樣式，可以自行修改
$("a[rel=example_group]").fancybox({
'transitionIn' : 'none',
'transitionOut' : 'none',
'titlePosition' : 'inside',
'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' ' + title : '') + '</span>';
}
});
到這邊正常來說fancybox基本設定已經完成，只要點選圖片連結就可以看到燈箱效果，如果沒有出現的話，很高的機率都是js或是css的路徑設定錯誤。對於$()這個符號有興趣的網友可以參考jQuery Selectors。更多特效及客製化設定請參考fancybox#how to use，fancybox#API & Options，fancybox#Tips & Tricks。
之所以測試了那麼多種box，原因在於某個工作內容要取得的圖片是放在多媒體中心(數位典藏國家型科技計畫，由中央研究院資訊科學研究所建置)，而多媒體中心讀取圖片的方式是透過以下連結來取圖。
http://ndmmc2.iis.sinica.edu.tw/System/upload/GetImage.jsp?file_name=03-00001-0&type=6&user_name=taipei
這就遇到一個問題了，有很多box套件會先檢查<a href=”xxxxxx”>及<img src=”xxxxx”>這兩個圖片來源部份是不是以「圖片」副檔名做為結尾，過濾掉有問題的檔名，減少套件發生錯誤的機率，也就是說上面這條從多媒體中心讀取圖片的連結在某些套件下是讀不到圖片的(被套件預先過濾掉了，會被判定成taipei結尾，不符合圖片副檔名)，所以遇到遠端取圖卻無法出圖的時候，可以在連結最後面加一個參數&_=.jpeg目的只是在跳過套件的過濾。
http://ndmmc2.iis.sinica.edu.tw/System/upload/GetImage.jsp?file_name=03-00001-0&type=6&user_name=taipei&_=.jpeg