使用FancyBox燈箱效果呈現圖片，無法顯示圖片

黃小蛙 — Wed, 28 Dec 2011 04:15:05 +0000

小蛙的最近一個工作中，要讓使用者點了縮圖之後可以透過燈箱效果開啟大圖並且上下頁切換，之前小蛙試過很多種燈箱效果套件，舉凡是colorbox, fancybox, lightbox, thinbox, thickbox, greybox … 等(小蛙沒記錯的話應該試了有十種)，為什麼要是那麼多種呢？不是效果不好，每個套件都有自己獨特的做法，但呈現出來的效果大致上是差不多的，會嘗試那麼多種的原因在於圖片讀取的方式，這篇文章紀錄一下使用FancyBox讀不到圖片時的小技巧。

fancybox的使用方式很簡單，只要到fancybox官網點選右上角的Download就可以開始下載，解壓縮後可以看到有一個index.html，點開來就可以看到範例了。這邊以官方的說明文件簡單列出基本使用方法。

以上這些code都是放在 放在這 ，另外有一些其他選項。

接下來是建立點了會跳出燈箱的連結。

要以Gallery(相簿)方式呈現，只要在中加一個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 'Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? '   ' + title : '') + '';
                       }
});

到這邊正常來說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套件會先檢查及這兩個圖片來源部份是不是以「圖片」副檔名做為結尾，過濾掉有問題的檔名，減少套件發生錯誤的機率，也就是說上面這條從多媒體中心讀取圖片的連結在某些套件下是讀不到圖片的(被套件預先過濾掉了，會被判定成taipei結尾，不符合圖片副檔名)，所以遇到遠端取圖卻無法出圖的時候，可以在連結最後面加一個參數&_=.jpeg目的只是在跳過套件的過濾。

http://ndmmc2.iis.sinica.edu.tw/System/upload/GetImage.jsp?file_name=03-00001-0&type=6&user_name=taipei&_=.jpeg

這篇文章使用FancyBox燈箱效果呈現圖片，無法顯示圖片最早出現於記下來。

box – 記下來

使用FancyBox燈箱效果呈現圖片，無法顯示圖片