• A-Fu Design
  • 前端設計
    • jQuery 套件
    • HTML 5
  • 關於A-Fu
  • 隱私權政策
  • 聯絡A-Fu
Google+ facebook twitter

A-Fu Design

A-Fu Design

首圖

Windows 10 是微軟最新的作業系統,除了功能上有很多的改變之外,我覺得預設桌布也是許多人會注意的,像是 XP 的桌布大家似乎永遠都會記得一樣,而 Windows 8 大家都只會記得一格一格的動態磚,這次我安裝了 Windows 10 預覽版,當中目前有這幾幅預設的桌布,大家欣賞欣賞囉!喜歡的人就自己下載取用囉^^。 接下來是一堆花系列,不...

Share
Tweet
Pin
Share
No 意見
首圖

有時候在拍照的時候難免會有路人亂入你的相片,但在現實上你又不能大喊請他們全部離開,回到家又不會 Photoshop 沒辦法將人從照片中修掉,這時候由 Jihosoft 推出的好用軟體 Photo Eraser 就派上用場啦!就跟著威信一起來看看究竟怎麼將礙眼的照片瑕疵一鍵修掉吧! 妙招一:移除畫面中亂入路人 使用方式非常簡單,點選畫面左邊的畫筆並於工作區將要移除的物...

Share
Tweet
Pin
Share
No 意見
首圖

(圖/Flickr首頁截圖) Flickr 今天宣布將於 2019 年 2 月 5 日 刪除免費會員的照片,但只有當你的帳號超過 1000 張的時候才會開始刪除,Flickr 也提出了付費會員升級優惠方案,換句話說,免費會員最多只能有 1000 張照片。 按讚加入粉絲頁: 科技新柚...

Share
Tweet
Pin
Share
No 意見
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




Share
Tweet
Pin
Share
No 意見
Lazy Load 網頁圖片延遲加載
Lazy Load 當你的網站上有很多商品圖片的時候,會開始慢慢地感覺到進入網站的速度是越來越慢,而這一個套件主要是先讓網頁加載非圖片的靜態檔案,當使用者開始做向下瀏覽的時候才開始加載網站的圖片,對於有比較多圖片的網頁使用延遲加載的功能,能夠很有效的提高網頁本身的顯示速度,基於 jQuery 框架對於開發網站其他功能也很方便。
Share
Tweet
Pin
Share
No 意見
Image Wall with jQuery 照片牆套件 A-Fu Design
Image Wall with jQuery 照片牆套件
 Image Wall with jQuery 這是一個利用 jQuery 框架建立優美有有設計感的照片牆,在頁面中分散一些尺寸大小不一的圖片縮圖,當使用者在典籍其中的一張圖片時將會產生一條帶狀的幻燈片,在這一個帶狀的幻燈片中可以增加一些文字說明,當使用這再次點擊圖片時帶狀幻燈片即會關閉,隨後再以 Lightbox 效果打開原始圖片。
Share
Tweet
Pin
Share
No 意見
Older Posts

About me

還在努力掙扎中的工程師

Follow Us

  • Google+
  • facebook
  • twitter

Categories

Accordion Animation AutoComplete CSS Calendar Canvas Carousel Charts Color DatePicker Effects Facebook API Forms Gallery HTML5 Menu Mootools Prototype React images jQuery javascripts lightbox 前端技術 統計圖表 網頁設計

Recent Posts

  • Security Eye 4.4.1 免費網路攝影機監視系統,多路監視器解決方案
  • PotPlayer 1.7.16291 繁體中文免安裝,新增串流媒體播放的 MP4 格式
  • jQuery Gantt Chart 在網頁上繪製甘特圖的 jQuery 套件
  • 微軟推出 Font Maker 製作自己專屬 「手寫字型」
  • Kalendae 一個不依賴任何框架的日期選擇器

Sponsor


勸敗攻略

Facebook

Blog Archive

  • 5月 2026 (8)
  • 4月 2026 (58)
  • 3月 2026 (62)
  • 2月 2026 (55)
  • 1月 2026 (62)
  • 12月 2025 (62)
  • 11月 2025 (58)
  • 10月 2025 (62)
  • 9月 2025 (60)
  • 8月 2025 (62)
  • 7月 2025 (62)
  • 6月 2025 (58)
  • 4月 2025 (48)
  • 3月 2025 (60)
  • 2月 2025 (51)
  • 1月 2025 (56)
  • 12月 2024 (61)
  • 11月 2024 (60)
  • 10月 2024 (54)
  • 9月 2024 (55)
  • 8月 2024 (42)
  • 7月 2024 (40)
  • 6月 2024 (19)
  • 9月 2023 (3)
  • 4月 2023 (2)
  • 2月 2023 (1)
  • 12月 2021 (1)
  • 1月 2019 (11)
  • 12月 2018 (31)
  • 11月 2018 (31)
  • 10月 2018 (31)
  • 9月 2018 (30)
  • 8月 2018 (31)
  • 7月 2018 (3)
  • 2月 2018 (1)
  • 4月 2015 (1)
  • 9月 2014 (1)
  • 2月 2014 (1)
  • 7月 2013 (1)
  • 2月 2013 (2)
  • 1月 2013 (1)
  • 12月 2012 (12)
  • 11月 2012 (81)
  • 10月 2012 (64)

Created with by ThemeXpose | Distributed by Blogger Templates