唬人斯不唬人

這篇來寫一下如何為相片網站設定 filter. Filter 要做的事如下:

1. 找出相簿裡所有的小圖URL
2. 利用小圖URL找出大圖URL
3. 回傳所有的大圖URL資訊.

再來介紹一下 filter function 回傳的結果定義. VIL 支援的回傳結果種類如下:

1. String array, 每個 Element 就是圖片的URL.
2. Object array, 每個 Element 是一個包含圖片相關資訊的 Object. 這個 Object 可包含以下 property:

• src: 圖片的 URL, required.
• desc: 圖片的說明文字, optional
• thumb: 縮圖的 URL, optional.
• link: 圖片在相簿中的連結, optional.

以上這些 properties 只有 src 是必要的, 其它的 property 如果不存在, 則會自動代換成 src.

接下來我們以無名相簿為例來說明怎麼樣寫 Filter Function. 先隨便打開一本無名的熱門相簿來參考. 在網頁上要秀圖片, 最常用的方法就是用 <img> tag. 所以我們可以用以下方法抓出頁面上所有的小圖:

function(){
  var images = document.getElementsByTagName("img");
}

這樣 images 陣列中就是頁面上所有的 <img> 了. 因此, 用以下迴圈就可以找出所有的小圖URL了.

function(){
  var images = document.getElementsByTagName("img");
  for(var i = 0; i < images.length; i++){
     var imgurl = images[i].src;
  }
}

接下來進行第二步, 來看看大圖和小圖片URL有沒有什麼關聯性. 如果你有 Firebug 可以直接用它來觀察:

不然, 用 DOM Inspector也不錯:

再不然直接 "檢視原始碼" 也可以 :

接下來就是找出大圖的URL:

比對一下:

小圖: http://f4.wretch.yimg.com/bunny1010/9/thumbs/t1344171903.jpg
大圖: http://f4.wretch.yimg.com/bunny1010/9/1344171903.jpg

這樣很明顯了吧? 所以我們再把圖片URL處理一下:

function(){
   var images = document.getElementsByTagName("img");
   for(var i = 0; i < images.length; i++){
       var imgurl = images[i].src.replace(/thumb\/t/,'');
   }
}

這樣就是所有的大圖URL了. 再來把所有大圖路徑存入 Array 之後回傳即可.

function(){
  var images = document.getElementsByTagName("img");
  var myurls = new Array();
  for(var i = 0; i < images.length; i++){
     var imgurl = images[i].src.replace(/thumb\/t/,'');
     myurls.push(imgurl);
  }
  return myurls;
}

如此就完成最基本的 filter 了. 當然功能是很陽春的, 不過已經足夠讓 VIL 顯示圖片了. 對進階功能有興趣的朋友可以參考 VIL wiki 上完整版的 filter for wretch. 如果有了什麼成果, 也歡迎跟我聯絡分享喔!