2019年8月25日

讓相簿圖片在網頁上呈現各種拼貼效果﹍jQuery 畫廊外掛

讓相簿圖片在網頁上呈現各種拼貼效果﹍jQuery 畫廊外掛

Wayne Fu 0 A+ 色
nanogallery2-mosaic-layout.jpg-讓相簿圖片在網頁上呈現各種拼貼效果﹍jQuery 畫廊外掛這是「jQuery 相簿畫廊外掛 nanogallery2」系列文的第二篇，本篇將會介紹非常具有藝術感的「Mosaic 拼貼式」版型，如同觀賞美術館(gallery)畫作一般。



一、官方說明書


首先有必要瞭解一下「Mosaic 拼貼式」的版型製作原理，在「官方說明書」頁面，往下捲到「Mosaic layout」這個區塊，提供一個簡單的範例說明：

nanogallery2-mosaic-layout-1.jpg-讓相簿圖片在網頁上呈現各種拼貼效果﹍jQuery 畫廊外掛

參照上圖，將版面切割成九宮格後，需要設定的參數有以下四種：

  • c：代表 column，也可看做 X 軸(直向)座標
  • r：代表 row，也可看做 Y 軸(橫向)座標
  • w：代表 width，也就是寬度
  • h：代表 height，也就是高度

每張圖片都需要設定以上 4 組參數，上圖 Mosaic 版面一共使用了 5 張圖，這些圖片的參數如下：

galleryMosaic : [
{ c: 1, r: 1, w: 2, h: 2 },
{ c: 3, r: 1, w: 1, h: 1 },
{ c: 3, r: 2, w: 1, h: 1 },
{ c: 1, r: 3, w: 1, h: 1 },
{ c: 3, r: 3, w: 2, h: 1 }
]

第一張圖的 { c: 1, r: 1, w: 2, h: 2 } 代表：

  • 起始座標從左上開始計算
  • c: 1, r: 1 就是左上角那一格
  • w: 2, h: 2 代表這張圖的寬、高都是 2 個單位
  • 這張圖的面積將佔據從左上角延伸出來 2 x 2 的大小


第二張圖的 { c: 3, r: 1, w: 1, h: 1 } 代表：

  • c: 3, r: 1 就是右上角那一格
  • w: 1, h: 1 代表這張圖的寬、高都是 1 個單位
  • 這張圖的面積將佔據從右上角延伸出來 1 x 1 的大小


接下來以此類推，就能讓程式知道每張圖佔據哪個位置、佔用多少面積，從而拼貼出自己想要的 Mosaic 版面。

只要發揮想像力，你的畫廊將能呈現各種天馬行空的效果，以下直接來看範例。



二、抽象效果


nanogallery2-mosaic-layout-2.jpg-讓相簿圖片在網頁上呈現各種拼貼效果﹍jQuery 畫廊外掛

上圖這樣的不規則拼貼展示效果，出自官網「nanogallery2 demonstrations」。

以下提供範例程式碼：

<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>
<div id="nanogallery1"></div>
<script>
$("#nanogallery1").nanogallery2({
thumbnailHeight: 300,
thumbnailWidth: 300,
galleryMosaic: [
{ "w": 5, "h": 3, "c": 2, "r": 1 },
{ "w": 2, "h": 2, "c": 1, "r": 2 },
{ "w": 2, "h": 2, "c": 7, "r": 2 },
{ "w": 2, "h": 2, "c": 2, "r": 4 },
{ "w": 3, "h": 4, "c": 4, "r": 4 },
{ "w": 3, "h": 4, "c": 7, "r": 4 },
{ "w": 2, "h": 2, "c": 10, "r": 5 },
{ "w": 4, "h": 2, "c": 11, "r": 6 }
],
thumbnailGutterWidth: 0,
thumbnailGutterHeight: 0,
thumbnailBorderHorizontal: 5,
thumbnailBorderVertical: 5,
thumbnailHoverEffect2: "imageGrayOn|scale120",
thumbnailLabel: {
display: false
},
items: [{
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXlgHV_ZCa2QYOci-ZJurDjS68U1ucZSqOR8jduGZw5WNnK5sJ6hlG83pOZgpPGv8heNQUuRMXr599mYcdji4q30MwFwhUC2hn0DiQQ2ULfaFN7P6q8CcA1JIzc-1Hx0p6h_jRGVAaqJ59/s1600/cc0-image-stock-license.jpg",
srct: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXlgHV_ZCa2QYOci-ZJurDjS68U1ucZSqOR8jduGZw5WNnK5sJ6hlG83pOZgpPGv8heNQUuRMXr599mYcdji4q30MwFwhUC2hn0DiQQ2ULfaFN7P6q8CcA1JIzc-1Hx0p6h_jRGVAaqJ59/s300/cc0-image-stock-license.jpg",
title: "pic 1"
}, {
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRNr9Bky93aTxr9IWH87dTQf9i7q-mp_T6Vl_qKdTrnS5NyNmtRNYgmYLSistIQkj7QKUvMLzQemPEODVk1NGqfBxNKEL7TWMu34fxBYondB70hbRtp1ynmmJNsFHeKdgUbLy6AIOgJ0FT/s1600/will-google-close-blogger-business-analysis.jpg",
srct: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRNr9Bky93aTxr9IWH87dTQf9i7q-mp_T6Vl_qKdTrnS5NyNmtRNYgmYLSistIQkj7QKUvMLzQemPEODVk1NGqfBxNKEL7TWMu34fxBYondB70hbRtp1ynmmJNsFHeKdgUbLy6AIOgJ0FT/s300/will-google-close-blogger-business-analysis.jpg",
title: "pic 2"
}, {
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS8sCgWF_eRUYG2T8dlMVw7p3b1G54CBATGA1puPBk04L-WCsMprqnz9I5Op0di9O6XNBCUOOrld-shVZTu6SkSgX9ZsYNNuwKir1JatC5VZd4-OF7f8oQ01hL7JvPCx0A5y0T-Ip5fjL1/s1600/blogger-free-consultant.jpg",
srct: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS8sCgWF_eRUYG2T8dlMVw7p3b1G54CBATGA1puPBk04L-WCsMprqnz9I5Op0di9O6XNBCUOOrld-shVZTu6SkSgX9ZsYNNuwKir1JatC5VZd4-OF7f8oQ01hL7JvPCx0A5y0T-Ip5fjL1/s300/blogger-free-consultant.jpg",
title: "pic 3"
}, {
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-_v-pYzb6HxfdqMTu76o0JQZL_uMo1Hx8iZrRTX2g0UhHjyY9npU0FlKcQsX5SZaHxMfPIFO17p-4mxn1B1W-MYBCruJoZ1B1cheU2ssYhmgxkaLQR7G9H1rLkTeqNEzOcKJ9wM9W9q5I/s1600/mobile-detect-webview-fb-line-in-app.jpg",
srct: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-_v-pYzb6HxfdqMTu76o0JQZL_uMo1Hx8iZrRTX2g0UhHjyY9npU0FlKcQsX5SZaHxMfPIFO17p-4mxn1B1W-MYBCruJoZ1B1cheU2ssYhmgxkaLQR7G9H1rLkTeqNEzOcKJ9wM9W9q5I/s300/mobile-detect-webview-fb-line-in-app.jpg",
title: "pic 4"
}, {
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimZRe71G23iFca6yFEGzT2hbgS8L9PSUwDTV1KFDGzJHdlXAnL3uogb_IBqYja4vowX_c6yQnkgJ5TiYzXxvo0oelCWdWVtzBannmI1VltHdPIYFw_2oayepSxdYVE4REOaEBAHNHGywW2/s1600/picasa-url-parameter.jpg",
srct: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimZRe71G23iFca6yFEGzT2hbgS8L9PSUwDTV1KFDGzJHdlXAnL3uogb_IBqYja4vowX_c6yQnkgJ5TiYzXxvo0oelCWdWVtzBannmI1VltHdPIYFw_2oayepSxdYVE4REOaEBAHNHGywW2/s300/picasa-url-parameter.jpg",
title: "pic 5"
}, {
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ6YamXCJgsybo1hdgOO_Iot4-NZW2zz3A7CNysRS6dZiALRVA5Pi_zN6rKz8Vw1t6Ad-dG-vFAQch5Ed1afviheuPht_eF2FZy_nwLPS2H6ArqWt7iVf_d1gEZL4ApptHIpUs_xHnFkcX/s1600/github-api-upload-file.jpg",
srct: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ6YamXCJgsybo1hdgOO_Iot4-NZW2zz3A7CNysRS6dZiALRVA5Pi_zN6rKz8Vw1t6Ad-dG-vFAQch5Ed1afviheuPht_eF2FZy_nwLPS2H6ArqWt7iVf_d1gEZL4ApptHIpUs_xHnFkcX/s300/github-api-upload-file.jpg",
title: "pic 6"
}, {
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyRKoqPvM51_Z9i7OiLkO6b_luZHnE8R5Y1QtfAIGAvNY0HOixyKx28iFd41u7u302T3d_WsQmZA610WQwJcKz-TxXrkKkeP1ZDm6LSjWpK7P58WfF73q-YTMjq-GwdQcSkI1z7my-79Ux/s1600/seo-fake-information-identification.jpg",
srct: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyRKoqPvM51_Z9i7OiLkO6b_luZHnE8R5Y1QtfAIGAvNY0HOixyKx28iFd41u7u302T3d_WsQmZA610WQwJcKz-TxXrkKkeP1ZDm6LSjWpK7P58WfF73q-YTMjq-GwdQcSkI1z7my-79Ux/s300/seo-fake-information-identification.jpg",
title: "pic 7"
}, {
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBJdYvPb6GHnDNz1MhnI8nMESsMGtet5C23nj7abpGir9zymPj6LqEKwk5YCp_Pd36FocqRcbPDvkKvcAf4PpXIB3c8AI1yhORchKG5AhFYqFNUjz39GtnBIwkq6V2wlmpBeEyoOYgClgE/s1600/how-to-become-top-blog-writer.jpg",
srct: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBJdYvPb6GHnDNz1MhnI8nMESsMGtet5C23nj7abpGir9zymPj6LqEKwk5YCp_Pd36FocqRcbPDvkKvcAf4PpXIB3c8AI1yhORchKG5AhFYqFNUjz39GtnBIwkq6V2wlmpBeEyoOYgClgE/s300/how-to-become-top-blog-writer.jpg",
title: "pic 8"
}]
});
</script>
<style>
#nanogallery1.nGY2 .nGY2GThumbnail {background:#fff; border-color: #f8f8f8; border-top-width: 5px; border-right-width: 5px; border-bottom-width: 5px; border-left-width: 5px; }
</style>

這個根據官方提供的範例程式碼，展示效果如下：






三、整齊拼貼效果


nanogallery2-mosaic-layout-3.jpg-讓相簿圖片在網頁上呈現各種拼貼效果﹍jQuery 畫廊外掛

上圖這樣的整齊拼貼展示效果，出自「官網首頁」→ 往下找到並點擊 「MOSAIC example 2」。

以下提供範例程式碼：

<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>
<div id="nanogallery2"></div>
<script>
$("#nanogallery2").nanogallery2({
galleryDisplayTransitionDuration: 1500,
galleryMosaic : [
{ w: 1, h: 1, c: 1, r: 1 },
{ w: 1, h: 1, c: 2, r: 1 },
{ w: 1, h: 1, c: 3, r: 1 },
{ w: 1, h: 1, c: 4, r: 1 },
{ w: 1, h: 1, c: 5, r: 1 },
{ w: 1, h: 1, c: 6, r: 1 },
{ w: 1, h: 2, c: 1, r: 2 },
{ w: 2, h: 2, c: 2, r: 2 },
{ w: 2, h: 2, c: 4, r: 2 },
{ w: 1, h: 2, c: 6, r: 2 },
{ w: 1, h: 1, c: 1, r: 4 },
{ w: 1, h: 1, c: 2, r: 4 },
{ w: 1, h: 1, c: 3, r: 4 },
{ w: 1, h: 1, c: 4, r: 4 },
{ w: 1, h: 1, c: 5, r: 4 },
{ w: 1, h: 1, c: 6, r: 4 }
],
thumbnailAlignment: 'scaled',
thumbnailHeight: 300,
thumbnailWidth: 300,
thumbnailBaseGridHeight: 80,
thumbnailDisplayTransition: 'flipDown',
thumbnailDisplayTransitionDuration: 600,
thumbnailDisplayInterval: 30,
galleryMaxRows: 1,
galleryDisplayMode: 'rows',
thumbnailL1GutterWidth: 0,
thumbnailL1GutterHeight: 0,
thumbnailBorderHorizontal: 0,
thumbnailBorderVertical: 0,
thumbnailL1BuildInit2: '.nGY2GThumbnailAlbumTitle_border-left_5px solid #23CB99|.nGY2GThumbnailAlbumTitle_margin_20px|title_backgroundColor_rgba(200,200,200,0.8)|title_color_#000',
thumbnailL1HoverEffect2: 'image_scale_1.00_1.15_500_bounce|image_rotateZ_0deg_05deg',
galleryBuildInit2: 'perspective_900px|perspective-origin_50% 150%',
thumbnailHoverEffect2: 'label_font-size_1em_1.5em|title_backgroundColor_rgba(255,255,255,0.34)_rgba(((35,203,153,0.8)|title_color_#000_#fff|image_scale_1.00_1.10_5000|image_rotateZ_0deg_4deg_5000',
thumbnailToolbarImage: null,
thumbnailToolbarAlbum: null,
thumbnailLabel: {
display: false,
position: 'onBottomOverImage',
hideIcons: true,
titleFontSize: '1em',
align: 'left',
titleMultiLine: true,
displayDescription: false
},
gallerySorting: 'random',
galleryTheme: {
thumbnail: {
titleShadow: 'none',
descriptionShadow: 'none',
titleColor: '#fff'
},
navigationBreadcrumb: {
background: '#3C4B5B'
},
navigationFilter: {
background: '#2E7C7F',
backgroundSelected: '#19676B',
color: '#eee'
}
},
XviewerTheme: {
barBackground: 'rgba(35, 203, 153, 0.7)'
},
viewerToolbar: {
display: false
},
viewerTools: {
topLeft: 'label',
topRight: 'shareButton, rotateLeft, rotateRight, fullscreenButton, closeButton'
},

touchAnimation: false,
locationHash: true,
items: [{
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXlgHV_ZCa2QYOci-ZJurDjS68U1ucZSqOR8jduGZw5WNnK5sJ6hlG83pOZgpPGv8heNQUuRMXr599mYcdji4q30MwFwhUC2hn0DiQQ2ULfaFN7P6q8CcA1JIzc-1Hx0p6h_jRGVAaqJ59/s1600/cc0-image-stock-license.jpg",
srct: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXlgHV_ZCa2QYOci-ZJurDjS68U1ucZSqOR8jduGZw5WNnK5sJ6hlG83pOZgpPGv8heNQUuRMXr599mYcdji4q30MwFwhUC2hn0DiQQ2ULfaFN7P6q8CcA1JIzc-1Hx0p6h_jRGVAaqJ59/s300/cc0-image-stock-license.jpg",
title: "pic 1"
}, {
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRNr9Bky93aTxr9IWH87dTQf9i7q-mp_T6Vl_qKdTrnS5NyNmtRNYgmYLSistIQkj7QKUvMLzQemPEODVk1NGqfBxNKEL7TWMu34fxBYondB70hbRtp1ynmmJNsFHeKdgUbLy6AIOgJ0FT/s1600/will-google-close-blogger-business-analysis.jpg",
srct: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRNr9Bky93aTxr9IWH87dTQf9i7q-mp_T6Vl_qKdTrnS5NyNmtRNYgmYLSistIQkj7QKUvMLzQemPEODVk1NGqfBxNKEL7TWMu34fxBYondB70hbRtp1ynmmJNsFHeKdgUbLy6AIOgJ0FT/s300/will-google-close-blogger-business-analysis.jpg",
title: "pic 2"
}, {
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS8sCgWF_eRUYG2T8dlMVw7p3b1G54CBATGA1puPBk04L-WCsMprqnz9I5Op0di9O6XNBCUOOrld-shVZTu6SkSgX9ZsYNNuwKir1JatC5VZd4-OF7f8oQ01hL7JvPCx0A5y0T-Ip5fjL1/s1600/blogger-free-consultant.jpg",
srct: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS8sCgWF_eRUYG2T8dlMVw7p3b1G54CBATGA1puPBk04L-WCsMprqnz9I5Op0di9O6XNBCUOOrld-shVZTu6SkSgX9ZsYNNuwKir1JatC5VZd4-OF7f8oQ01hL7JvPCx0A5y0T-Ip5fjL1/s300/blogger-free-consultant.jpg",
title: "pic 3"
}, {
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-_v-pYzb6HxfdqMTu76o0JQZL_uMo1Hx8iZrRTX2g0UhHjyY9npU0FlKcQsX5SZaHxMfPIFO17p-4mxn1B1W-MYBCruJoZ1B1cheU2ssYhmgxkaLQR7G9H1rLkTeqNEzOcKJ9wM9W9q5I/s1600/mobile-detect-webview-fb-line-in-app.jpg",
srct: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-_v-pYzb6HxfdqMTu76o0JQZL_uMo1Hx8iZrRTX2g0UhHjyY9npU0FlKcQsX5SZaHxMfPIFO17p-4mxn1B1W-MYBCruJoZ1B1cheU2ssYhmgxkaLQR7G9H1rLkTeqNEzOcKJ9wM9W9q5I/s300/mobile-detect-webview-fb-line-in-app.jpg",
title: "pic 4"
}, {
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimZRe71G23iFca6yFEGzT2hbgS8L9PSUwDTV1KFDGzJHdlXAnL3uogb_IBqYja4vowX_c6yQnkgJ5TiYzXxvo0oelCWdWVtzBannmI1VltHdPIYFw_2oayepSxdYVE4REOaEBAHNHGywW2/s1600/picasa-url-parameter.jpg",
srct: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimZRe71G23iFca6yFEGzT2hbgS8L9PSUwDTV1KFDGzJHdlXAnL3uogb_IBqYja4vowX_c6yQnkgJ5TiYzXxvo0oelCWdWVtzBannmI1VltHdPIYFw_2oayepSxdYVE4REOaEBAHNHGywW2/s300/picasa-url-parameter.jpg",
title: "pic 5"
}, {
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ6YamXCJgsybo1hdgOO_Iot4-NZW2zz3A7CNysRS6dZiALRVA5Pi_zN6rKz8Vw1t6Ad-dG-vFAQch5Ed1afviheuPht_eF2FZy_nwLPS2H6ArqWt7iVf_d1gEZL4ApptHIpUs_xHnFkcX/s1600/github-api-upload-file.jpg",
srct: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ6YamXCJgsybo1hdgOO_Iot4-NZW2zz3A7CNysRS6dZiALRVA5Pi_zN6rKz8Vw1t6Ad-dG-vFAQch5Ed1afviheuPht_eF2FZy_nwLPS2H6ArqWt7iVf_d1gEZL4ApptHIpUs_xHnFkcX/s300/github-api-upload-file.jpg",
title: "pic 6"
}, {
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyRKoqPvM51_Z9i7OiLkO6b_luZHnE8R5Y1QtfAIGAvNY0HOixyKx28iFd41u7u302T3d_WsQmZA610WQwJcKz-TxXrkKkeP1ZDm6LSjWpK7P58WfF73q-YTMjq-GwdQcSkI1z7my-79Ux/s1600/seo-fake-information-identification.jpg",
srct: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyRKoqPvM51_Z9i7OiLkO6b_luZHnE8R5Y1QtfAIGAvNY0HOixyKx28iFd41u7u302T3d_WsQmZA610WQwJcKz-TxXrkKkeP1ZDm6LSjWpK7P58WfF73q-YTMjq-GwdQcSkI1z7my-79Ux/s300/seo-fake-information-identification.jpg",
title: "pic 7"
}, {
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBJdYvPb6GHnDNz1MhnI8nMESsMGtet5C23nj7abpGir9zymPj6LqEKwk5YCp_Pd36FocqRcbPDvkKvcAf4PpXIB3c8AI1yhORchKG5AhFYqFNUjz39GtnBIwkq6V2wlmpBeEyoOYgClgE/s1600/how-to-become-top-blog-writer.jpg",
srct: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBJdYvPb6GHnDNz1MhnI8nMESsMGtet5C23nj7abpGir9zymPj6LqEKwk5YCp_Pd36FocqRcbPDvkKvcAf4PpXIB3c8AI1yhORchKG5AhFYqFNUjz39GtnBIwkq6V2wlmpBeEyoOYgClgE/s300/how-to-become-top-blog-writer.jpg",
title: "pic 8"
}, {
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXlgHV_ZCa2QYOci-ZJurDjS68U1ucZSqOR8jduGZw5WNnK5sJ6hlG83pOZgpPGv8heNQUuRMXr599mYcdji4q30MwFwhUC2hn0DiQQ2ULfaFN7P6q8CcA1JIzc-1Hx0p6h_jRGVAaqJ59/s1600/cc0-image-stock-license.jpg",
srct: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXlgHV_ZCa2QYOci-ZJurDjS68U1ucZSqOR8jduGZw5WNnK5sJ6hlG83pOZgpPGv8heNQUuRMXr599mYcdji4q30MwFwhUC2hn0DiQQ2ULfaFN7P6q8CcA1JIzc-1Hx0p6h_jRGVAaqJ59/s300/cc0-image-stock-license.jpg",
title: "pic 1"
}, {
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRNr9Bky93aTxr9IWH87dTQf9i7q-mp_T6Vl_qKdTrnS5NyNmtRNYgmYLSistIQkj7QKUvMLzQemPEODVk1NGqfBxNKEL7TWMu34fxBYondB70hbRtp1ynmmJNsFHeKdgUbLy6AIOgJ0FT/s1600/will-google-close-blogger-business-analysis.jpg",
srct: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRNr9Bky93aTxr9IWH87dTQf9i7q-mp_T6Vl_qKdTrnS5NyNmtRNYgmYLSistIQkj7QKUvMLzQemPEODVk1NGqfBxNKEL7TWMu34fxBYondB70hbRtp1ynmmJNsFHeKdgUbLy6AIOgJ0FT/s300/will-google-close-blogger-business-analysis.jpg",
title: "pic 2"
}, {
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS8sCgWF_eRUYG2T8dlMVw7p3b1G54CBATGA1puPBk04L-WCsMprqnz9I5Op0di9O6XNBCUOOrld-shVZTu6SkSgX9ZsYNNuwKir1JatC5VZd4-OF7f8oQ01hL7JvPCx0A5y0T-Ip5fjL1/s1600/blogger-free-consultant.jpg",
srct: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS8sCgWF_eRUYG2T8dlMVw7p3b1G54CBATGA1puPBk04L-WCsMprqnz9I5Op0di9O6XNBCUOOrld-shVZTu6SkSgX9ZsYNNuwKir1JatC5VZd4-OF7f8oQ01hL7JvPCx0A5y0T-Ip5fjL1/s300/blogger-free-consultant.jpg",
title: "pic 3"
}, {
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-_v-pYzb6HxfdqMTu76o0JQZL_uMo1Hx8iZrRTX2g0UhHjyY9npU0FlKcQsX5SZaHxMfPIFO17p-4mxn1B1W-MYBCruJoZ1B1cheU2ssYhmgxkaLQR7G9H1rLkTeqNEzOcKJ9wM9W9q5I/s1600/mobile-detect-webview-fb-line-in-app.jpg",
srct: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-_v-pYzb6HxfdqMTu76o0JQZL_uMo1Hx8iZrRTX2g0UhHjyY9npU0FlKcQsX5SZaHxMfPIFO17p-4mxn1B1W-MYBCruJoZ1B1cheU2ssYhmgxkaLQR7G9H1rLkTeqNEzOcKJ9wM9W9q5I/s300/mobile-detect-webview-fb-line-in-app.jpg",
title: "pic 4"
}, {
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimZRe71G23iFca6yFEGzT2hbgS8L9PSUwDTV1KFDGzJHdlXAnL3uogb_IBqYja4vowX_c6yQnkgJ5TiYzXxvo0oelCWdWVtzBannmI1VltHdPIYFw_2oayepSxdYVE4REOaEBAHNHGywW2/s1600/picasa-url-parameter.jpg",
srct: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimZRe71G23iFca6yFEGzT2hbgS8L9PSUwDTV1KFDGzJHdlXAnL3uogb_IBqYja4vowX_c6yQnkgJ5TiYzXxvo0oelCWdWVtzBannmI1VltHdPIYFw_2oayepSxdYVE4REOaEBAHNHGywW2/s300/picasa-url-parameter.jpg",
title: "pic 5"
},{
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ6YamXCJgsybo1hdgOO_Iot4-NZW2zz3A7CNysRS6dZiALRVA5Pi_zN6rKz8Vw1t6Ad-dG-vFAQch5Ed1afviheuPht_eF2FZy_nwLPS2H6ArqWt7iVf_d1gEZL4ApptHIpUs_xHnFkcX/s1600/github-api-upload-file.jpg",
srct: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ6YamXCJgsybo1hdgOO_Iot4-NZW2zz3A7CNysRS6dZiALRVA5Pi_zN6rKz8Vw1t6Ad-dG-vFAQch5Ed1afviheuPht_eF2FZy_nwLPS2H6ArqWt7iVf_d1gEZL4ApptHIpUs_xHnFkcX/s300/github-api-upload-file.jpg",
title: "pic 6"
}, {
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyRKoqPvM51_Z9i7OiLkO6b_luZHnE8R5Y1QtfAIGAvNY0HOixyKx28iFd41u7u302T3d_WsQmZA610WQwJcKz-TxXrkKkeP1ZDm6LSjWpK7P58WfF73q-YTMjq-GwdQcSkI1z7my-79Ux/s1600/seo-fake-information-identification.jpg",
srct: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyRKoqPvM51_Z9i7OiLkO6b_luZHnE8R5Y1QtfAIGAvNY0HOixyKx28iFd41u7u302T3d_WsQmZA610WQwJcKz-TxXrkKkeP1ZDm6LSjWpK7P58WfF73q-YTMjq-GwdQcSkI1z7my-79Ux/s300/seo-fake-information-identification.jpg",
title: "pic 7"
}, {
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBJdYvPb6GHnDNz1MhnI8nMESsMGtet5C23nj7abpGir9zymPj6LqEKwk5YCp_Pd36FocqRcbPDvkKvcAf4PpXIB3c8AI1yhORchKG5AhFYqFNUjz39GtnBIwkq6V2wlmpBeEyoOYgClgE/s1600/how-to-become-top-blog-writer.jpg",
srct: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBJdYvPb6GHnDNz1MhnI8nMESsMGtet5C23nj7abpGir9zymPj6LqEKwk5YCp_Pd36FocqRcbPDvkKvcAf4PpXIB3c8AI1yhORchKG5AhFYqFNUjz39GtnBIwkq6V2wlmpBeEyoOYgClgE/s300/how-to-become-top-blog-writer.jpg",
title: "pic 8"
}]
});
</script>
<style>.nGY2 .nGY2GThumbnail { background: #444; }</style>

這個根據官方提供的範例程式碼，展示效果如下：






四、不規則拼貼效果


nanogallery2-mosaic-layout-4.jpg-讓相簿圖片在網頁上呈現各種拼貼效果﹍jQuery 畫廊外掛

上圖這樣的不規則拼貼展示效果，出自官網首頁 → 往下找到並點擊 「MOSAIC example 1」。

以下提供範例程式碼：

<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>
<div id="nanogallery3"></div>
<script>
$("#nanogallery3").nanogallery2({
galleryDisplayTransitionDuration: 1500,
galleryMosaic : [
{ w: 2, h: 2, c: 1, r: 1 },
{ w: 1, h: 1, c: 3, r: 1 },
{ w: 1, h: 1, c: 3, r: 2 },
{ w: 1, h: 2, c: 4, r: 1 },
{ w: 2, h: 1, c: 5, r: 1 },
{ w: 2, h: 2, c: 5, r: 2 },
{ w: 1, h: 1, c: 4, r: 3 },
{ w: 2, h: 1, c: 2, r: 3 },
{ w: 1, h: 2, c: 1, r: 3 },
{ w: 1, h: 1, c: 2, r: 4 },
{ w: 2, h: 1, c: 3, r: 4 },
{ w: 1, h: 1, c: 5, r: 4 },
{ w: 1, h: 1, c: 6, r: 4 }
],
thumbnailAlignment: "scaled",
thumbnailHeight: 300,
thumbnailWidth: 300,
thumbnailBaseGridHeight: 80,
thumbnailDisplayTransition: "slideLeft",
thumbnailDisplayTransitionDuration: 600,
thumbnailDisplayInterval: 30,
galleryMaxRows: 1,
galleryDisplayMode: "rows",
thumbnailL1GutterWidth: 0,
thumbnailL1GutterHeight: 0,
thumbnailBorderHorizontal: 0,
thumbnailBorderVertical: 0,
thumbnailL1BuildInit2: "image_scale_1.20",
thumbnailL1HoverEffect2: "thumbnail_scale_1.00_1.05_300|image_translateX_-20px_20px",
thumbnailToolbarImage: null,
thumbnailToolbarAlbum: null,
thumbnailLabel: {
display: false,
position: "onBottomOverImage",
hideIcons: true,
titleFontSize: "1em",
align: "left",
titleMultiLine: true,
displayDescription: false
},
gallerySorting: "random",
galleryTheme: {
thumbnail: {
titleShadow: "none",
descriptionShadow: "none",
titleColor: "#fff"
},
navigationBreadcrumb: {
background: "#3C4B5B"
},
navigationFilter: {
background: "#2E7C7F",
backgroundSelected: "#19676B",
color: "#eee"
}
},
XviewerTheme: {
barBackground: "rgba(35, 203, 153, 0.7)"
},
viewerToolbar: {
display: false
},
viewerTools: {
topLeft: "label",
topRight: "shareButton, rotateLeft, rotateRight, fullscreenButton, closeButton"
},
touchAnimation: false,
locationHash: true,
items: [{
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXlgHV_ZCa2QYOci-ZJurDjS68U1ucZSqOR8jduGZw5WNnK5sJ6hlG83pOZgpPGv8heNQUuRMXr599mYcdji4q30MwFwhUC2hn0DiQQ2ULfaFN7P6q8CcA1JIzc-1Hx0p6h_jRGVAaqJ59/s1600/cc0-image-stock-license.jpg",
srct: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXlgHV_ZCa2QYOci-ZJurDjS68U1ucZSqOR8jduGZw5WNnK5sJ6hlG83pOZgpPGv8heNQUuRMXr599mYcdji4q30MwFwhUC2hn0DiQQ2ULfaFN7P6q8CcA1JIzc-1Hx0p6h_jRGVAaqJ59/s300/cc0-image-stock-license.jpg",
title: "pic 1"
}, {
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRNr9Bky93aTxr9IWH87dTQf9i7q-mp_T6Vl_qKdTrnS5NyNmtRNYgmYLSistIQkj7QKUvMLzQemPEODVk1NGqfBxNKEL7TWMu34fxBYondB70hbRtp1ynmmJNsFHeKdgUbLy6AIOgJ0FT/s1600/will-google-close-blogger-business-analysis.jpg",
srct: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRNr9Bky93aTxr9IWH87dTQf9i7q-mp_T6Vl_qKdTrnS5NyNmtRNYgmYLSistIQkj7QKUvMLzQemPEODVk1NGqfBxNKEL7TWMu34fxBYondB70hbRtp1ynmmJNsFHeKdgUbLy6AIOgJ0FT/s300/will-google-close-blogger-business-analysis.jpg",
title: "pic 2"
}, {
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS8sCgWF_eRUYG2T8dlMVw7p3b1G54CBATGA1puPBk04L-WCsMprqnz9I5Op0di9O6XNBCUOOrld-shVZTu6SkSgX9ZsYNNuwKir1JatC5VZd4-OF7f8oQ01hL7JvPCx0A5y0T-Ip5fjL1/s1600/blogger-free-consultant.jpg",
srct: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS8sCgWF_eRUYG2T8dlMVw7p3b1G54CBATGA1puPBk04L-WCsMprqnz9I5Op0di9O6XNBCUOOrld-shVZTu6SkSgX9ZsYNNuwKir1JatC5VZd4-OF7f8oQ01hL7JvPCx0A5y0T-Ip5fjL1/s300/blogger-free-consultant.jpg",
title: "pic 3"
}, {
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-_v-pYzb6HxfdqMTu76o0JQZL_uMo1Hx8iZrRTX2g0UhHjyY9npU0FlKcQsX5SZaHxMfPIFO17p-4mxn1B1W-MYBCruJoZ1B1cheU2ssYhmgxkaLQR7G9H1rLkTeqNEzOcKJ9wM9W9q5I/s1600/mobile-detect-webview-fb-line-in-app.jpg",
srct: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-_v-pYzb6HxfdqMTu76o0JQZL_uMo1Hx8iZrRTX2g0UhHjyY9npU0FlKcQsX5SZaHxMfPIFO17p-4mxn1B1W-MYBCruJoZ1B1cheU2ssYhmgxkaLQR7G9H1rLkTeqNEzOcKJ9wM9W9q5I/s300/mobile-detect-webview-fb-line-in-app.jpg",
title: "pic 4"
}, {
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimZRe71G23iFca6yFEGzT2hbgS8L9PSUwDTV1KFDGzJHdlXAnL3uogb_IBqYja4vowX_c6yQnkgJ5TiYzXxvo0oelCWdWVtzBannmI1VltHdPIYFw_2oayepSxdYVE4REOaEBAHNHGywW2/s1600/picasa-url-parameter.jpg",
srct: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimZRe71G23iFca6yFEGzT2hbgS8L9PSUwDTV1KFDGzJHdlXAnL3uogb_IBqYja4vowX_c6yQnkgJ5TiYzXxvo0oelCWdWVtzBannmI1VltHdPIYFw_2oayepSxdYVE4REOaEBAHNHGywW2/s300/picasa-url-parameter.jpg",
title: "pic 5"
}, {
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ6YamXCJgsybo1hdgOO_Iot4-NZW2zz3A7CNysRS6dZiALRVA5Pi_zN6rKz8Vw1t6Ad-dG-vFAQch5Ed1afviheuPht_eF2FZy_nwLPS2H6ArqWt7iVf_d1gEZL4ApptHIpUs_xHnFkcX/s1600/github-api-upload-file.jpg",
srct: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ6YamXCJgsybo1hdgOO_Iot4-NZW2zz3A7CNysRS6dZiALRVA5Pi_zN6rKz8Vw1t6Ad-dG-vFAQch5Ed1afviheuPht_eF2FZy_nwLPS2H6ArqWt7iVf_d1gEZL4ApptHIpUs_xHnFkcX/s300/github-api-upload-file.jpg",
title: "pic 6"
}, {
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyRKoqPvM51_Z9i7OiLkO6b_luZHnE8R5Y1QtfAIGAvNY0HOixyKx28iFd41u7u302T3d_WsQmZA610WQwJcKz-TxXrkKkeP1ZDm6LSjWpK7P58WfF73q-YTMjq-GwdQcSkI1z7my-79Ux/s1600/seo-fake-information-identification.jpg",
srct: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyRKoqPvM51_Z9i7OiLkO6b_luZHnE8R5Y1QtfAIGAvNY0HOixyKx28iFd41u7u302T3d_WsQmZA610WQwJcKz-TxXrkKkeP1ZDm6LSjWpK7P58WfF73q-YTMjq-GwdQcSkI1z7my-79Ux/s300/seo-fake-information-identification.jpg",
title: "pic 7"
}, {
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBJdYvPb6GHnDNz1MhnI8nMESsMGtet5C23nj7abpGir9zymPj6LqEKwk5YCp_Pd36FocqRcbPDvkKvcAf4PpXIB3c8AI1yhORchKG5AhFYqFNUjz39GtnBIwkq6V2wlmpBeEyoOYgClgE/s1600/how-to-become-top-blog-writer.jpg",
srct: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBJdYvPb6GHnDNz1MhnI8nMESsMGtet5C23nj7abpGir9zymPj6LqEKwk5YCp_Pd36FocqRcbPDvkKvcAf4PpXIB3c8AI1yhORchKG5AhFYqFNUjz39GtnBIwkq6V2wlmpBeEyoOYgClgE/s300/how-to-become-top-blog-writer.jpg",
title: "pic 8"
}, {
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXlgHV_ZCa2QYOci-ZJurDjS68U1ucZSqOR8jduGZw5WNnK5sJ6hlG83pOZgpPGv8heNQUuRMXr599mYcdji4q30MwFwhUC2hn0DiQQ2ULfaFN7P6q8CcA1JIzc-1Hx0p6h_jRGVAaqJ59/s1600/cc0-image-stock-license.jpg",
srct: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXlgHV_ZCa2QYOci-ZJurDjS68U1ucZSqOR8jduGZw5WNnK5sJ6hlG83pOZgpPGv8heNQUuRMXr599mYcdji4q30MwFwhUC2hn0DiQQ2ULfaFN7P6q8CcA1JIzc-1Hx0p6h_jRGVAaqJ59/s300/cc0-image-stock-license.jpg",
title: "pic 1"
}, {
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRNr9Bky93aTxr9IWH87dTQf9i7q-mp_T6Vl_qKdTrnS5NyNmtRNYgmYLSistIQkj7QKUvMLzQemPEODVk1NGqfBxNKEL7TWMu34fxBYondB70hbRtp1ynmmJNsFHeKdgUbLy6AIOgJ0FT/s1600/will-google-close-blogger-business-analysis.jpg",
srct: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRNr9Bky93aTxr9IWH87dTQf9i7q-mp_T6Vl_qKdTrnS5NyNmtRNYgmYLSistIQkj7QKUvMLzQemPEODVk1NGqfBxNKEL7TWMu34fxBYondB70hbRtp1ynmmJNsFHeKdgUbLy6AIOgJ0FT/s300/will-google-close-blogger-business-analysis.jpg",
title: "pic 2"
}, {
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS8sCgWF_eRUYG2T8dlMVw7p3b1G54CBATGA1puPBk04L-WCsMprqnz9I5Op0di9O6XNBCUOOrld-shVZTu6SkSgX9ZsYNNuwKir1JatC5VZd4-OF7f8oQ01hL7JvPCx0A5y0T-Ip5fjL1/s1600/blogger-free-consultant.jpg",
srct: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS8sCgWF_eRUYG2T8dlMVw7p3b1G54CBATGA1puPBk04L-WCsMprqnz9I5Op0di9O6XNBCUOOrld-shVZTu6SkSgX9ZsYNNuwKir1JatC5VZd4-OF7f8oQ01hL7JvPCx0A5y0T-Ip5fjL1/s300/blogger-free-consultant.jpg",
title: "pic 3"
}, {
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-_v-pYzb6HxfdqMTu76o0JQZL_uMo1Hx8iZrRTX2g0UhHjyY9npU0FlKcQsX5SZaHxMfPIFO17p-4mxn1B1W-MYBCruJoZ1B1cheU2ssYhmgxkaLQR7G9H1rLkTeqNEzOcKJ9wM9W9q5I/s1600/mobile-detect-webview-fb-line-in-app.jpg",
srct: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-_v-pYzb6HxfdqMTu76o0JQZL_uMo1Hx8iZrRTX2g0UhHjyY9npU0FlKcQsX5SZaHxMfPIFO17p-4mxn1B1W-MYBCruJoZ1B1cheU2ssYhmgxkaLQR7G9H1rLkTeqNEzOcKJ9wM9W9q5I/s300/mobile-detect-webview-fb-line-in-app.jpg",
title: "pic 4"
}, {
src: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimZRe71G23iFca6yFEGzT2hbgS8L9PSUwDTV1KFDGzJHdlXAnL3uogb_IBqYja4vowX_c6yQnkgJ5TiYzXxvo0oelCWdWVtzBannmI1VltHdPIYFw_2oayepSxdYVE4REOaEBAHNHGywW2/s1600/picasa-url-parameter.jpg",
srct: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimZRe71G23iFca6yFEGzT2hbgS8L9PSUwDTV1KFDGzJHdlXAnL3uogb_IBqYja4vowX_c6yQnkgJ5TiYzXxvo0oelCWdWVtzBannmI1VltHdPIYFw_2oayepSxdYVE4REOaEBAHNHGywW2/s300/picasa-url-parameter.jpg",
title: "pic 5"
}]
});
</script>
<style>.nGY2 .nGY2GThumbnail { background: #444; }</style>

這個根據官方提供的範例程式碼，展示效果如下：





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

前端開發 ‧ Blogger 探研 ‧ 網站架設

歡迎來到我的雲端資料庫，這裡除了分享網路應用心得，也是最專業的 Blogger 中文部落格。利用側邊欄「搜尋」及「文章分類」，可解決大多數的問題喔！

下方連結還有更多的 Blogger 資源及服務，如需諮詢、合作，歡迎填寫 聯絡表單 或來信：contact@wfublog.com

沒有留言:

張貼留言注意事項：

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

TOP