讓相簿圖片在網頁上呈現「瀑布流」+「自適應」版型﹍jQuery 畫廊外掛
![讓相簿圖片在網頁上呈現「瀑布流」+「自適應」版型﹍jQuery 畫廊外掛](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGESbmcCUXvm0Whkx9dx4DTTm5WEDoeXidU_Uw-P2xyyx8xT21QG0CyoB6xbp1vS1gmdD-1ZoAVI9W3kmgdiV8p1SeZUSXMQLZSNNWn5mt3SqN8l-gKjEzDQiQbXvUXdnuNqryGXEG33UI/s1600/nanogallery2-justified-cascading-layout.jpg)
這篇是「 jQuery 相簿畫廊外掛 nanogallery2 」系列文的第三篇,前兩篇分別介紹了: Grid 網格式排版 Mosaic 拼貼式排版 接下來介紹剩餘的兩種版面效果,但是標題 "自適應版型" 中文的字面跟英文原用語 "just...
繼續閱讀全文讓相簿圖片在網頁上呈現各種拼貼效果﹍jQuery 畫廊外掛
![讓相簿圖片在網頁上呈現各種拼貼效果﹍jQuery 畫廊外掛](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKrZGZFLFABEh4p0317U21OyUO1ZayHwOTYmbOQq2iBPbv4xjaecjDfxTuMJI9PQtt1Cq_AN30_x2onY92RvizhyphenhyphencwzAKQLzNDXNR8UYKGu-sE-5dJvqLOPynupmzo-HF0-tAMzdzgKkgK/s1600/nanogallery2-mosaic-layout.jpg)
這是「 jQuery 相簿畫廊外掛 nanogallery2 」系列文的第二篇,本篇將會介紹非常具有藝術感的「Mosaic 拼貼式」版型,如同觀賞美術館(gallery)畫作一般。
繼續閱讀全文讓 Google Photo 實現各種相簿畫廊或輪播效果
![讓 Google Photo 實現各種相簿畫廊或輪播效果](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV2voDAYaQlqUIeKfqAX_Dfkw1VEukK5V-klVE41l0q4Ki8vINZguIQH80B_euI4lqw_FFhF6xwGsrZhxcensKOX7mLZ5jmuo0mgkN_Ad2tHNYpRY2hNgKsa7KP6oANDPjh5D1GFZIL1Zq/s1600/google-photo-gallery-slider-plugin.jpg)
Google 相簿由於官方的用意並非設計來當作圖床,那麼想要自行製作各種 Google Photo 工具相當不容易,例如在網頁上展示各種畫廊圖片排版效果、或是利用 Google Photo 來輪播等等。 主要是官方不提供任何輕易取得圖片外連的方法,如同這篇「 Google 關...
繼續閱讀全文jQuery 相簿畫廊外掛 nanogallery2﹍排版效果與功能都十分強大
![jQuery 相簿畫廊外掛 nanogallery2﹍排版效果與功能都十分強大](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgukucNe2sTnvq85PB2KFTymh87X1Gcnpm6xsx9LCa8GtIp76ES8MMaiOwoaGyIIrA16o__iFQMdNuWWritlHkNcEtg40Ngf6RD71YmDlYjyumIPZMY8hJERuRkyNtKK3Uggef945YzyfmP/s1600/jquery-gallery-grid-plugin-nanogallery.jpg)
在網頁上展示相簿圖片可以有幾種作法,最常見的是使用輪播效果,過去介紹過幾個知名的 jQuery 外掛(使用 CDN): 最熱門 jQuery 圖片輪播外掛 Owl Carousel 過場效果華麗的 jQuery 圖片輪播外掛 Camera 優雅又八面玲瓏的 jQuery ...
繼續閱讀全文過場效果華麗的 jQuery 圖片輪播外掛 Camera﹍CDN 安裝懶人包
![過場效果華麗的 jQuery 圖片輪播外掛 Camera﹍CDN 安裝懶人包](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhi_U6QeDthvCJFCKKDJ_ygzFEWH7uS-t0oKJs0yPqxLL_3TdJ2KuhpAUZcbuuiC0jY3X14H00IZlZTFuxbibwxiGAieNXb8Ti-rQ3PNV0kJwe2cqDf7I-TrQOfij1a2t7WwBtHhvz95lvY/s640/slideshow-camera.jpg)
之前曾介紹「 Camera 圖片輪播外掛安裝及使用詳解 」,他值得推薦的特色不少,除了多樣的炫麗過場特效,幾乎各種想得到的效果都能自訂,更重要的是支援 "自適應" 寬度,這在行動裝置是非常重要的。 可惜的是這個外掛不容易安裝, 需要支援目錄式的網路空間 (...
繼續閱讀全文最熱門 jQuery 圖片輪播外掛 Owl Carousel﹍CDN 安裝懶人包
![最熱門 jQuery 圖片輪播外掛 Owl Carousel﹍CDN 安裝懶人包](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP82Oh5yGL2HPKcL9UaBh-ljaBFWTM8kZnwMNmpXCv5MRqbzsTeLLzFg0r6D2BEkvXmKITTMbwqkclD49TR2fr7IoCeqg1WIi-Q5b0l86WYbKUlkil1M_eGnlfed6brCBjrb_FUqHDjINE/s640/owl-carousel-2.jpg)
「 Owl Carousel 」可說是使用率最高的圖片輪播外掛,許多免費、付費下載的網頁模版或部落格範本,都是內建這個輪播效果。主要原因可能是行動裝置普及後,「Owl Carousel」不但 可顯示自適應(RWD)版面,還支援手指觸摸操作的效果,可輕易地在手機直接用手勢滑動輪播圖...
繼續閱讀全文Fancybox, 優雅又八面玲瓏的 jQuery 燈箱外掛 (3) CDN 安裝懶人包
![Fancybox, 優雅又八面玲瓏的 jQuery 燈箱外掛 (3) CDN 安裝懶人包](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQLpJjD0NFxZ6kxXsHF8sBjPZs9VTb_TmnouuV_WX8tAtn3_v9z3nojSov7ZCBds_1jM0qH8YqJmuGt6PQl5iWrCjBDBkkFMbcZ68Vomjf93h9ItA3zhFJMmT3oF7zOMlEXUCzSHYZ6K9F/s640/fancybox-cdn.jpg)
最近在進行整理網站外部連結的 "年終大掃除" 行動,目前已經清除所有的 "網站小圖示" (改用「 Font Awesome 圖示字型 」),以及刪除 "Google 自訂搜尋" (改用「 Ajax 搜尋框 」)。接下來成...
繼續閱讀全文jQuery 圖片輪播外掛﹍camera 安裝及使用詳解
![jQuery 圖片輪播外掛﹍camera 安裝及使用詳解](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhi_U6QeDthvCJFCKKDJ_ygzFEWH7uS-t0oKJs0yPqxLL_3TdJ2KuhpAUZcbuuiC0jY3X14H00IZlZTFuxbibwxiGAieNXb8Ti-rQ3PNV0kJwe2cqDf7I-TrQOfij1a2t7WwBtHhvz95lvY/s1600/slideshow-camera.jpg)
許多非官方的 Blogger 範本,都會內建圖片輪播效果,可在部落格首頁展示站長的精選或隨機文章。不過也並非得用這些範本,才能擁有 slideshow 功能,已經有數量龐大、可免費使用的現成 jQuery 函式庫,例如這個網頁「 20 個免費好用的響應式 jQuery 輪播幻燈片...
繼續閱讀全文Fancybox, 優雅又八面玲瓏的 jQuery 燈箱外掛 (2)縮圖+滾輪特效安裝懶人包
![Fancybox, 優雅又八面玲瓏的 jQuery 燈箱外掛 (2)縮圖+滾輪特效安裝懶人包](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXZzxfqN2D3nAdom6DiabpG7rygtDAD5XtQgsP1aBHHfqkypvo2Ae5tdCmcIAyYHYt8KclW6NYn-atbydVVe1L1b0wGhVNzrF8tleAlmfLKLrlLCLiITJOjhTWhflMXIMA2Sz0cf_U8FNs/s1600/fancybox-lightbox.jpg)
2016.4.13 公告: 為了避免上傳檔案、尋找免費空間的麻煩,最簡單的安裝方式請直接參考這篇「 Fancybox 燈箱外掛 CDN 安裝懶人包 」。 上一篇的「 fancybox 安裝教學 」說明了如何從官網下載檔案、上傳到自己的空間、最後利用本站提供的簡便前導程式來顯...
繼續閱讀全文Fancybox, 優雅又八面玲瓏的 jQuery 燈箱外掛 (1)安裝教學
![Fancybox, 優雅又八面玲瓏的 jQuery 燈箱外掛 (1)安裝教學](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXZzxfqN2D3nAdom6DiabpG7rygtDAD5XtQgsP1aBHHfqkypvo2Ae5tdCmcIAyYHYt8KclW6NYn-atbydVVe1L1b0wGhVNzrF8tleAlmfLKLrlLCLiITJOjhTWhflMXIMA2Sz0cf_U8FNs/s1600/fancybox-lightbox.jpg)
2016.4.13 公告: 為了避免上傳檔案、尋找免費空間的麻煩,最簡單的安裝方式請直接參考這篇「 Fancybox 燈箱外掛 CDN 安裝懶人包 」。 圖片為主的網站若使用燈箱效果,當特效執行時,相信能給予讀者很有質感的加分印象。而這次介紹的 fancybox 燈箱外掛,...
繼續閱讀全文