Pages

jQuery plugin 顯示 facebook 粉絲團照片

Oct 4, 2013

接續前文<<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 的作法加上,當需要呈現很多張照片時,在前端可以又較好的瀏覽效果。