讓相簿圖片在網頁上呈現「瀑布流」+「自適應」版型﹍jQuery 畫廊外掛

這篇是「 jQuery 相簿畫廊外掛 nanogallery2 」系列文的第三篇,前兩篇分別介紹了: Grid 網格式排版 Mosaic 拼貼式排版 接下來介紹剩餘的兩種版面效果,但是標題 "自適應版型" 中文的字面跟英文原用語 "just...
繼續閱讀全文讓相簿圖片在網頁上呈現各種拼貼效果﹍jQuery 畫廊外掛

這是「 jQuery 相簿畫廊外掛 nanogallery2 」系列文的第二篇,本篇將會介紹非常具有藝術感的「Mosaic 拼貼式」版型,如同觀賞美術館(gallery)畫作一般。
繼續閱讀全文讓 Google Photo 實現各種相簿畫廊或輪播效果

Google 相簿由於官方的用意並非設計來當作圖床,那麼想要自行製作各種 Google Photo 工具相當不容易,例如在網頁上展示各種畫廊圖片排版效果、或是利用 Google Photo 來輪播等等。 主要是官方不提供任何輕易取得圖片外連的方法,如同這篇「 Google 關...
繼續閱讀全文jQuery 相簿畫廊外掛 nanogallery2﹍排版效果與功能都十分強大

在網頁上展示相簿圖片可以有幾種作法,最常見的是使用輪播效果,過去介紹過幾個知名的 jQuery 外掛(使用 CDN): 最熱門 jQuery 圖片輪播外掛 Owl Carousel 過場效果華麗的 jQuery 圖片輪播外掛 Camera 優雅又八面玲瓏的 jQuery ...
繼續閱讀全文過場效果華麗的 jQuery 圖片輪播外掛 Camera﹍CDN 安裝懶人包

之前曾介紹「 Camera 圖片輪播外掛安裝及使用詳解 」,他值得推薦的特色不少,除了多樣的炫麗過場特效,幾乎各種想得到的效果都能自訂,更重要的是支援 "自適應" 寬度,這在行動裝置是非常重要的。 可惜的是這個外掛不容易安裝, 需要支援目錄式的網路空間 (...
繼續閱讀全文最熱門 jQuery 圖片輪播外掛 Owl Carousel﹍CDN 安裝懶人包

「 Owl Carousel 」可說是使用率最高的圖片輪播外掛,許多免費、付費下載的網頁模版或部落格範本,都是內建這個輪播效果。主要原因可能是行動裝置普及後,「Owl Carousel」不但 可顯示自適應(RWD)版面,還支援手指觸摸操作的效果,可輕易地在手機直接用手勢滑動輪播圖...
繼續閱讀全文Fancybox, 優雅又八面玲瓏的 jQuery 燈箱外掛 (3) CDN 安裝懶人包

最近在進行整理網站外部連結的 "年終大掃除" 行動,目前已經清除所有的 "網站小圖示" (改用「 Font Awesome 圖示字型 」),以及刪除 "Google 自訂搜尋" (改用「 Ajax 搜尋框 」)。接下來成...
繼續閱讀全文jQuery 圖片輪播外掛﹍camera 安裝及使用詳解

許多非官方的 Blogger 範本,都會內建圖片輪播效果,可在部落格首頁展示站長的精選或隨機文章。不過也並非得用這些範本,才能擁有 slideshow 功能,已經有數量龐大、可免費使用的現成 jQuery 函式庫,例如這個網頁「 20 個免費好用的響應式 jQuery 輪播幻燈片...
繼續閱讀全文Fancybox, 優雅又八面玲瓏的 jQuery 燈箱外掛 (2)縮圖+滾輪特效安裝懶人包

2016.4.13 公告: 為了避免上傳檔案、尋找免費空間的麻煩,最簡單的安裝方式請直接參考這篇「 Fancybox 燈箱外掛 CDN 安裝懶人包 」。 上一篇的「 fancybox 安裝教學 」說明了如何從官網下載檔案、上傳到自己的空間、最後利用本站提供的簡便前導程式來顯...
繼續閱讀全文Fancybox, 優雅又八面玲瓏的 jQuery 燈箱外掛 (1)安裝教學

2016.4.13 公告: 為了避免上傳檔案、尋找免費空間的麻煩,最簡單的安裝方式請直接參考這篇「 Fancybox 燈箱外掛 CDN 安裝懶人包 」。 圖片為主的網站若使用燈箱效果,當特效執行時,相信能給予讀者很有質感的加分印象。而這次介紹的 fancybox 燈箱外掛,...
繼續閱讀全文