2019年6月25日

jQuery 相簿畫廊外掛 nanogallery2﹍排版效果與功能都十分強大

jQuery 相簿畫廊外掛 nanogallery2﹍排版效果與功能都十分強大

Wayne Fu 0 A+
jquery-gallery-grid-plugin-nanogallery.jpg-十分強大的 jQuery 相簿畫廊外掛﹍nanogallery2在網頁上展示相簿圖片可以有幾種作法,最常見的是使用輪播效果,過去介紹過幾個知名的 jQuery 外掛(使用 CDN):


輪播在畫面上的視覺效果,能同時展示的數量有限,如果希望一次展示 10 張圖或更多數量時,則需要網格(Grid)這類的外掛。而根據不同的排版方式,也需要尋找不一樣的外掛。

本篇找到一個免費的超強悍外掛「nanogallery」,功能、質感、特效完全不輸付費軟體,而且本身就能實現各種網格排列效果,等於一套工具可抵至少 3~4 個外掛。

而且更貼心的是這外掛提供了 CDN 外連,站長們不需再費心尋找網路空間存放檔案,本篇也會展示範例效果及提供範例程式碼。





一、官網介紹


jquery-gallery-grid-plugin-nanogallery-0.jpg-十分強大的 jQuery 相簿畫廊外掛﹍nanogallery2



基本上官網製作的很詳盡,而且若是你的相簿圖片符合以下條件,還可使用官方提供的懶人包產生器,非常方便:

  • 放在特定的網址路徑
  • 使用 Flickr 相簿

原本這個外掛有支援 Google Photo 相簿,但因為 Google 的 API 改版,所以現在已經無法用懶人包產生器抓 Google Photo 的圖片了,那麼選擇 Google Photo 時會提示錯誤訊息

另外很可惜的是,如果沒用官方的懶人包產生器,也就是必須自行抽出自己相簿中、一張張的所有圖片外連,來套用這個工具的話,雖然官方操作說明書做的很詳細,但我覺得只適合前端工程師閱讀,一般使用者應該覺得像在看天書,要成功的話難度非常之高。

本篇整理了簡單的範例程式碼,直接套用的話成功率會比較大。



二、各種排版效果


官網首頁提供了 4 種排版類型的範例效果,以下簡單介紹:

1. Mosaic 拼貼式

jquery-gallery-grid-plugin-nanogallery-1.jpg-十分強大的 jQuery 相簿畫廊外掛﹍nanogallery2

很有藝術感的版面配置,修改一下參數就能變化出各種不規則的拼貼效果。官方也有提供另一種版面比較整齊的拼貼效果(例如本文開頭的圖片)

滑鼠經過時會有放大的特效,若圖片沒全部展示完,右下角會顯示剩餘圖片數。


2. Grid 網格式

jquery-gallery-grid-plugin-nanogallery-2.jpg-十分強大的 jQuery 相簿畫廊外掛﹍nanogallery2

中規中矩、最常見的排版方式,本篇將以此效果來舉例說明。

滑鼠經過時會有放大標題文字的特效,若圖片沒全部展示完,下方會有剩餘圖片數的提示按鈕。


3. Justified 對齊式

jquery-gallery-grid-plugin-nanogallery-3.jpg-十分強大的 jQuery 相簿畫廊外掛﹍nanogallery2

這種左右對齊的排版方式比較活潑、沒那麼呆板。

滑鼠經過時會出現標題文字,以及數個功能按鈕,效果意外的好。

下方則有分頁的導航按鈕。


4. Cascading 瀑布式

jquery-gallery-grid-plugin-nanogallery-4.jpg-十分強大的 jQuery 相簿畫廊外掛﹍nanogallery2

瀑布流的排版很生動,但也許不是那麼好駕馭,個人沒那麼喜好,因為最下方的版面參差不齊。



三、燈箱效果


除了相簿畫廊的排版展示效果之外,點擊圖片後的畫面也非常值得介紹:

jquery-gallery-grid-plugin-nanogallery-5.jpg-十分強大的 jQuery 相簿畫廊外掛﹍nanogallery2

觀看個別圖片時會立即進入燈箱效果,一一說明功能:

  • 左上顯示總圖片數、目前圖片
  • 點擊播放按鈕會進行自動播放
  • 右上分別有關閉、全螢幕、旋轉等等功能,非常專業
  • 除了有左右箭頭可切換圖片,實際上直接點擊圖片偏左、偏右處,也能切換圖片,設計非常貼心
  • 下方也有各種功能按鈕,可顯示圖片資訊、分享、另開視窗等等,非常齊全
  • 直接按 Esc 也可離開燈箱畫面,回到畫廊



四、範例程式碼


以下提供「Grid 網格式」的範例程式碼:


1. 載入外掛

首先需要載入 jQuery 以及官方提供的 CDN 外連:

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>
<link href="https://unpkg.com/nanogallery2/dist/css/nanogallery2.min.css" rel="stylesheet" type="text/css"></link>
<script type="text/javascript" src="https://unpkg.com/nanogallery2/dist/jquery.nanogallery2.min.js"></script>



2. 主程式

接著在展示相簿圖片的地方,插入以下程式碼:


請參照以下修改說明:

  • A 行 與 C 行綠色 ID 字串請一致
  • D、E 行可自訂縮圖寬度、高度
  • G 行可設定預設顯示的縮圖行數
  • H ~ AN 行放入所有圖片網址相關資訊,頭尾用括號 [] 包起來:
    • 每一組圖片的資訊,分別用 {} 包起來,彼此用小寫逗號 "," 隔開,最後一組圖片的刮號後面不可有小寫逗號
    • 每組圖片需分別填入 3 組字串,也就是 I ~ K 行標示的綠色字串
    • src: 原始圖片網址
    • srct: 縮圖網址
    • title: 圖片描述字串
  • 請依照以上處理邏輯來新增、刪減圖片相關資訊


以上範例程式碼的展示效果,請見下面範例網頁,同時此範例網頁提供了兩種縮圖比例的效果:




五、補充說明


雖然這個「Grid 網格式」可設定縮圖尺寸,但實際執行上並非完全依照設定的尺寸呈現,而是依照縮圖比例自動根據寬度進行 RWD 調整,這是更好的設計

這個外掛可以設定的參數非常多,請詳閱官方說明書進行修改,來達到自己想要的效果。

本篇只提供了「Grid 網格式」的效果,將來視情況有可能介紹其他版面效果。

由於需要一張張圖片手動進行細部設定,所以一定程度上可說是相當瑣碎,這件事最好是能夠由程式代勞比較輕鬆。

如果之後研究成功的話,將來應該會提供支援 Google Photo 相簿的功能,可直接載入相簿中的圖片,省下逐筆填入圖片網址的時間。


更多圖片展示工具:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

沒有留言:

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題可至「Blogger 社團」提問。
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢
◎ 若是使用官方 RWD 範本,請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改!
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP