使用 Image Picker 和 Masonry 來顯示圖片清單

使用 Image Picker + Masonry + imagesLoaded 來顯示圖片清單,只要寫一點點 JavaScript  程式碼,就能達到不錯的效果。

JavaScript 函式庫

欲完成本文的實作範例,需要以下 JavaScript 函式庫通力合作:
效果

下圖是使用 Image Picker 搭配 Masonry(這拼字好難記啊!)排版後的結果。


實作範例

Image Picker 能夠將一個 HTML 下拉清單(select 元素)裡面的項目改用圖片來顯示(其實是將產生另一個圖片清單區塊)。用法如下:

  1. 在 HTML 裡面加入一個
  2. 在網頁載入時為上述

我在 jsFiddle 上面放了一個可直接測試的範例,所以這裡就不貼程式碼了。點此連結可開啟線上範例程式:Image Picker Example

進入之後點上方的 Run 連結,即可看到執行結果,如下圖:



調整 CSS

預設情況下,Image Picker 會顯示原圖的正常比例,如下圖:


可是當圖片大小不一時,可能會顯得太過凌亂,需要調整。關鍵在於知道 Image Picker 用來控制每一張圖片的 CSS 樣式名稱是 "image_picker_image"

以下 CSS 範例可指定每張圖片的最大寬度和最小寬度。

.image_picker_image {
    max-width: 140px;
    max-height: 100px;
    background-color: #FF0000;
}

套用此樣式之後,實際的效果請看本文的第一張圖片,就能看出差異。

解決圖片重疊問題

原本我沒有使用 imagesLoaded,可是卻發現開啟圖片選取對話窗的時候,有些圖片會重疊,如下圖所示:


這是因為我有用 CSS 改變圖片大小的緣故,而 Masonry 是在這之前就已經計算並設定好圖片的排列位置。Masonry 官網的 FAQ 也有提到這個問題,而解決方法就是利用 imagesLoaded 產生的事件,以便在所有圖片載入完成後,才執行 Mansory 的排版工作。參考以下範例:

var $container = $('.image_picker_selector');
// initialize
$container.imagesLoaded(function () {
    $container.masonry({
        columnWidth: 30,
        itemSelector: '.thumbnail'
    });
});

同場加映:IE 11 的偵錯功能

順便提及,IE 11 的偵錯工具比先前的版本又更好用了。

底下是兩張螢幕截圖,更詳細的介紹,可參考相關文章Channel 9 的影片

選取 HTML 元素

單步除錯 JavaScript

Copyright © 2012. Huan-Lin 學習筆記 - All Rights Reserved
Powered by Blogger
Template Design by Cool Blogger Tutorials
Published by Templates Doctor