A-Fu Design

Facebook Album Browser 臉書公開相簿的瀏覽套件使用 jQuery

Facebook Album Browser 直接抓取臉書的資料，Reponsive jQuery 套件，用於瀏覽Facebook帳戶的公開相簿。套件可以用在一班電腦或者是手機平板裝置。這一個套件主要是用來嵌入在您的網站上訂製相簿列表，不用受到 Facebook 的外觀限制，也可以讓你使用點擊相簿或者相片的事件。

使用方法：
第一步 載入Facebook Album Browser 需要用到的 JavaScript 檔
<!-- 使用 Google AJAX API 取得 jQuery 框架 1.11.0 min 版本 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- 載入 Facebook Album Browser 的CSS 檔案 -->
<link rel="stylesheet" type="text/css" href="../src/jquery.fb.albumbrowser.css" />
<!-- 載入 Facebook Album Browser 的主程式碼 -->
<script type="text/javascript" src="../src/jquery.fb.albumbrowser.js"></script>


第二步 放置相簿的Div 區塊位置
<div class="fb-album-container"></div>



第三步 當網頁載入完成抓取相簿資料

<script type="text/javascript">
 $(document).ready(function() {
      $(".fb-album-container").FacebookAlbumBrowser({
        account: "natgeo",  // facebook 帳號ID
        skipAlbums: ["Profile Pictures", "Timeline Photos"],  // 需要跳過不顯示的相簿
        showAccountInfo: true,   // 是否顯示帳號資訊
        showImageCount: true,    // 是否顯示相片數量
        lightbox: true,          // 內頁是否使用 lightbox
        photosCheckbox: true,    // 允許多選的子項目
        photoChecked: function(photo) {
          //選取的相片項目
        },
        photoUnchecked: function(photo) {
          //沒有選取的相片項目
        },
        albumSelected: function(photo) {
          //相簿選擇的事件
        },
        photoSelected: function(photo) {
          //相片選擇的事件
        }
      });
    });
</script>

Facebook Album Browser with jQuery 相簿內容

作者網站：https://github.com/dejanstojanovic/Facebook-Album-Browser
檔案大小：16.3 KB
檔案下載：https://github.com/dejanstojanovic/Facebook-Album-Browser