jQuery plugin 顯示 facebook 粉絲團照片

接續前文<<jQuery 顯示 facebook 粉絲團照片>>，修改原本的 jQuery 加入動態產生標籤與CSS，讓使用端更為簡單。
第一撰寫 jQuery plugin，主要是參考：[jQuery] 自製 jQuery Plugin - Part 1，這文章寫得很詳盡，推薦 !!
筆者已將 jQuery 及相關檔案上傳至 Windows Azure 網站上，可選擇以下兩種方式使用。

1.直接連結網頁

線上展示
http://html5jquery.azurewebsites.net/jquery-fbalbum.html?page=3510Harvest&num=12&size=196&cols=3

範例說明
http://html5jquery.azurewebsites.net/jquery-fbalbum.html?page=3510Harvest&num=12&size=196&cols=3
網址
http://html5jquery.azurewebsites.net/jquery-fbalbum.html
參數

• page : 粉絲團的名稱
• num : 顯示幾張照片，預設值: 12
• size : 單張照片的大小(px)，預設值: 196
• cols : 顯示為幾欄，預設值: 3

以 <iframe> 置入網址呈現的結果


參考語法

<iframe src="http://html5jquery.azurewebsites.net/jquery-fbalbum.html?page=lessonsfrommovies&num=9&size=196&cols=3" frameborder="0" scrolling="no" style="width: 616px; height: 616px; overflow: hidden; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none;">

2. 置入 JavaScript

< script>
        $( function () {
            $.getScript("http://html5jquery.azurewebsites.net/jquery-fbalbum-1.0.0.js" )
            .done( function (script, textStatus) {
                $.fn.fbalbum_show( 'youcart' , 12, 120, 4);
            })
        })
</script >

其中第5行  $.fn.fbalbum_show( 'youcart' , 12, 120, 4); 的 4 個參數依序分別

1. 粉絲團的名稱



2. 顯示幾張照片



3. 單張照片的大小(px)



4. 顯示為幾欄

後續

考慮將 LazyLoad 的作法加上，當需要呈現很多張照片時，在前端可以又較好的瀏覽效果。