小蛙的最近一個工作中,要讓使用者點了縮圖之後可以透過燈箱效果開啟大圖並且上下頁切換,之前小蛙試過很多種燈箱效果套件,舉凡是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 ? ' &nbsp; ' + title : '') + '</span>';
                       }
});

到這邊正常來說fancybox基本設定已經完成,只要點選圖片連結就可以看到燈箱效果,如果沒有出現的話,很高的機率都是js或是css的路徑設定錯誤。對於$()這個符號有興趣的網友可以參考jQuery Selectors。更多特效及客製化設定請參考fancybox#how to usefancybox#API & Optionsfancybox#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

相關文章

SSL For Free – 免費又有綠色鎖頭的 SSL Certificates

之前聽說 Google 會優先搜尋有 https 的網頁 (參考:
2016-07-07 23:00:54
hans

8

Android Vuforia with jPCT-AE (5) – 多重模型載入,以 obj 為例

要進到這系列最後一篇文章了,這篇文章拖了很久,一直沒有時間整理,結果到最後 ... 程式碼留下來了,記憶卻有些模糊了,這邊小蛙配著程式碼盡可能的把還記得的東西寫下來。
2016-07-06 11:24:19
hans

8

Android Vuforia with jPCT-AE (4) – 載入 3DS 測試

延續 jPCT-AE Loader 載入模型的部份,這篇要記錄載入 3ds 檔案格式的方法,基本上跟前面幾個 obj, md2 的方法差不多,只有一些小小的變化而已。
2016-07-06 10:24:33
hans

8

Android Vuforia with jPCT-AE (3) – 載入 md2 測試

前兩篇介紹如何直接透過 jPCT-AE 直接繪圖以及載入 .obj 檔案,這邊繼續介紹 jPCT-AE 載入 md2 的方法,載入動作大致上類似,唯一不同的只有 texture 設定部份。
2016-07-06 09:24:43
hans

8

Android Vuforia with jPCT-AE (2) – 載入 obj 測試

上一篇 Android Vuforia with jPCT-AE (1) –
2016-07-06 08:24:55
hans

8

Android Vuforia with jPCT-AE (1) – 基本範例

說來慚愧,從 Google Adsense 被 ban 之後,就好久沒有發文了,站上 Vuforia 的文章也已經是好久以前的事情了 (遠目),最近有專案要用到 Vuforia,爬以前的文回來看,蛙哩咧 ... 現在已經更新到 Vu
2016-07-06 07:57:58
hans

8

ClickForce (MobiForce) 當機問題

這真是個浪費時間又漫長的過程,CF 推出新版後台以及新版 SDK 的時候,小蛙就下載來測試,一開始小蛙直接套在「我的股票精算師」上,但只要一套上去就當機 ...
2015-09-02 10:32:51
hans

8

我的股票精算師備份功能

常遇到使用者詢問「我的股票精算師」要怎麼備份,這篇記錄一下,需要寫怎麼備份表示軟體設計上有很大的問題,造成使用者使用上的困難,但小蛙最近沒有時間去做修改 ... 只好委屈精算師的使用者了 ><
2015-02-06 18:32:07
hans

8

第一次從淘寶買小米盒子3

最近阿咕有在大螢幕上看韓劇的需求,剛好搭上 Chromecast 的上市,survey 了一些 Android 電視棒。這篇記錄這幾天的經過。

2015-01-04 23:36:33
hans

8




 回覆

你可以使用以下語法 HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="">

(required)

(required)

   
© 2012 蛙齋 Suffusion theme by Sayontan Sinha