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://4.bp.blogspot.com/-1g7zj-oB-s4/XFO0dywZTVI/AAAAAAAAYRk/_t7XrH7YtQoCp67gHxZ4pskAHX9TUnqHQCLcBGAs/s1600/cc0-image-stock-license.jpg",
srct: "https://4.bp.blogspot.com/-1g7zj-oB-s4/XFO0dywZTVI/AAAAAAAAYRk/_t7XrH7YtQoCp67gHxZ4pskAHX9TUnqHQCLcBGAs/s300/cc0-image-stock-license.jpg",
title: "pic 1"
}, {
src: "https://2.bp.blogspot.com/-MQgmDdWOn5s/WoEcbqEIWPI/AAAAAAAAWXo/h8U_GHIW75obyskVvwgGQlD3ji0gjU7NACLcBGAs/s1600/will-google-close-blogger-business-analysis.jpg",
srct: "https://2.bp.blogspot.com/-MQgmDdWOn5s/WoEcbqEIWPI/AAAAAAAAWXo/h8U_GHIW75obyskVvwgGQlD3ji0gjU7NACLcBGAs/s300/will-google-close-blogger-business-analysis.jpg",
title: "pic 2"
}, {
src: "https://4.bp.blogspot.com/-Vp6_fuEU8zM/V7vRUTEb-HI/AAAAAAAAOJE/9YVKsFPH6Tk1ADOnOK_yU44EXCthIY75gCLcB/s1600/blogger-free-consultant.jpg",
srct: "https://4.bp.blogspot.com/-Vp6_fuEU8zM/V7vRUTEb-HI/AAAAAAAAOJE/9YVKsFPH6Tk1ADOnOK_yU44EXCthIY75gCLcB/s300/blogger-free-consultant.jpg",
title: "pic 3"
}, {
src: "https://1.bp.blogspot.com/-Kix19BaDmNE/Wy4Y_U_3uPI/AAAAAAAAXPY/nIwxapAva4QVDYpZLcFssWe4_q7KkDvVgCLcBGAs/s1600/mobile-detect-webview-fb-line-in-app.jpg",
srct: "https://1.bp.blogspot.com/-Kix19BaDmNE/Wy4Y_U_3uPI/AAAAAAAAXPY/nIwxapAva4QVDYpZLcFssWe4_q7KkDvVgCLcBGAs/s300/mobile-detect-webview-fb-line-in-app.jpg",
title: "pic 4"
}, {
src: "https://1.bp.blogspot.com/-G607thP7cWc/XDg22TxSSUI/AAAAAAAAYLc/bWQMrxhgneEBSKKiJ3TCuqYnxpcAyofVACLcBGAs/s1600/picasa-url-parameter.jpg",
srct: "https://1.bp.blogspot.com/-G607thP7cWc/XDg22TxSSUI/AAAAAAAAYLc/bWQMrxhgneEBSKKiJ3TCuqYnxpcAyofVACLcBGAs/s300/picasa-url-parameter.jpg",
title: "pic 5"
}, {
src: "https://1.bp.blogspot.com/-fuPZuDAdv4s/XGN84O7JSkI/AAAAAAAAYV0/1LcgeouMQ18tWegvK11vz1qHDweOLtXZACLcBGAs/s1600/github-api-upload-file.jpg",
srct: "https://1.bp.blogspot.com/-fuPZuDAdv4s/XGN84O7JSkI/AAAAAAAAYV0/1LcgeouMQ18tWegvK11vz1qHDweOLtXZACLcBGAs/s300/github-api-upload-file.jpg",
title: "pic 6"
}, {
src: "https://2.bp.blogspot.com/-Bc-JyEZwpG4/W6LTpxNm2mI/AAAAAAAAXpg/Tf-GhNpvFLICCg_6ICW3y4Er4trMozW3gCLcBGAs/s1600/seo-fake-information-identification.jpg",
srct: "https://2.bp.blogspot.com/-Bc-JyEZwpG4/W6LTpxNm2mI/AAAAAAAAXpg/Tf-GhNpvFLICCg_6ICW3y4Er4trMozW3gCLcBGAs/s300/seo-fake-information-identification.jpg",
title: "pic 7"
}, {
src: "https://3.bp.blogspot.com/-lo1NZ0KVZSU/WRrNvclwESI/AAAAAAAAPjQ/k50YaNha-1YlzwU0qtHwbhBoLfXPll1iACLcB/s1600/how-to-become-top-blog-writer.jpg",
srct: "https://3.bp.blogspot.com/-lo1NZ0KVZSU/WRrNvclwESI/AAAAAAAAPjQ/k50YaNha-1YlzwU0qtHwbhBoLfXPll1iACLcB/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://4.bp.blogspot.com/-1g7zj-oB-s4/XFO0dywZTVI/AAAAAAAAYRk/_t7XrH7YtQoCp67gHxZ4pskAHX9TUnqHQCLcBGAs/s1600/cc0-image-stock-license.jpg",
srct: "https://4.bp.blogspot.com/-1g7zj-oB-s4/XFO0dywZTVI/AAAAAAAAYRk/_t7XrH7YtQoCp67gHxZ4pskAHX9TUnqHQCLcBGAs/s300/cc0-image-stock-license.jpg",
title: "pic 1"
}, {
src: "https://2.bp.blogspot.com/-MQgmDdWOn5s/WoEcbqEIWPI/AAAAAAAAWXo/h8U_GHIW75obyskVvwgGQlD3ji0gjU7NACLcBGAs/s1600/will-google-close-blogger-business-analysis.jpg",
srct: "https://2.bp.blogspot.com/-MQgmDdWOn5s/WoEcbqEIWPI/AAAAAAAAWXo/h8U_GHIW75obyskVvwgGQlD3ji0gjU7NACLcBGAs/s300/will-google-close-blogger-business-analysis.jpg",
title: "pic 2"
}, {
src: "https://4.bp.blogspot.com/-Vp6_fuEU8zM/V7vRUTEb-HI/AAAAAAAAOJE/9YVKsFPH6Tk1ADOnOK_yU44EXCthIY75gCLcB/s1600/blogger-free-consultant.jpg",
srct: "https://4.bp.blogspot.com/-Vp6_fuEU8zM/V7vRUTEb-HI/AAAAAAAAOJE/9YVKsFPH6Tk1ADOnOK_yU44EXCthIY75gCLcB/s300/blogger-free-consultant.jpg",
title: "pic 3"
}, {
src: "https://1.bp.blogspot.com/-Kix19BaDmNE/Wy4Y_U_3uPI/AAAAAAAAXPY/nIwxapAva4QVDYpZLcFssWe4_q7KkDvVgCLcBGAs/s1600/mobile-detect-webview-fb-line-in-app.jpg",
srct: "https://1.bp.blogspot.com/-Kix19BaDmNE/Wy4Y_U_3uPI/AAAAAAAAXPY/nIwxapAva4QVDYpZLcFssWe4_q7KkDvVgCLcBGAs/s300/mobile-detect-webview-fb-line-in-app.jpg",
title: "pic 4"
}, {
src: "https://1.bp.blogspot.com/-G607thP7cWc/XDg22TxSSUI/AAAAAAAAYLc/bWQMrxhgneEBSKKiJ3TCuqYnxpcAyofVACLcBGAs/s1600/picasa-url-parameter.jpg",
srct: "https://1.bp.blogspot.com/-G607thP7cWc/XDg22TxSSUI/AAAAAAAAYLc/bWQMrxhgneEBSKKiJ3TCuqYnxpcAyofVACLcBGAs/s300/picasa-url-parameter.jpg",
title: "pic 5"
}, {
src: "https://1.bp.blogspot.com/-fuPZuDAdv4s/XGN84O7JSkI/AAAAAAAAYV0/1LcgeouMQ18tWegvK11vz1qHDweOLtXZACLcBGAs/s1600/github-api-upload-file.jpg",
srct: "https://1.bp.blogspot.com/-fuPZuDAdv4s/XGN84O7JSkI/AAAAAAAAYV0/1LcgeouMQ18tWegvK11vz1qHDweOLtXZACLcBGAs/s300/github-api-upload-file.jpg",
title: "pic 6"
}, {
src: "https://2.bp.blogspot.com/-Bc-JyEZwpG4/W6LTpxNm2mI/AAAAAAAAXpg/Tf-GhNpvFLICCg_6ICW3y4Er4trMozW3gCLcBGAs/s1600/seo-fake-information-identification.jpg",
srct: "https://2.bp.blogspot.com/-Bc-JyEZwpG4/W6LTpxNm2mI/AAAAAAAAXpg/Tf-GhNpvFLICCg_6ICW3y4Er4trMozW3gCLcBGAs/s300/seo-fake-information-identification.jpg",
title: "pic 7"
}, {
src: "https://3.bp.blogspot.com/-lo1NZ0KVZSU/WRrNvclwESI/AAAAAAAAPjQ/k50YaNha-1YlzwU0qtHwbhBoLfXPll1iACLcB/s1600/how-to-become-top-blog-writer.jpg",
srct: "https://3.bp.blogspot.com/-lo1NZ0KVZSU/WRrNvclwESI/AAAAAAAAPjQ/k50YaNha-1YlzwU0qtHwbhBoLfXPll1iACLcB/s300/how-to-become-top-blog-writer.jpg",
title: "pic 8"
}, {
src: "https://4.bp.blogspot.com/-1g7zj-oB-s4/XFO0dywZTVI/AAAAAAAAYRk/_t7XrH7YtQoCp67gHxZ4pskAHX9TUnqHQCLcBGAs/s1600/cc0-image-stock-license.jpg",
srct: "https://4.bp.blogspot.com/-1g7zj-oB-s4/XFO0dywZTVI/AAAAAAAAYRk/_t7XrH7YtQoCp67gHxZ4pskAHX9TUnqHQCLcBGAs/s300/cc0-image-stock-license.jpg",
title: "pic 1"
}, {
src: "https://2.bp.blogspot.com/-MQgmDdWOn5s/WoEcbqEIWPI/AAAAAAAAWXo/h8U_GHIW75obyskVvwgGQlD3ji0gjU7NACLcBGAs/s1600/will-google-close-blogger-business-analysis.jpg",
srct: "https://2.bp.blogspot.com/-MQgmDdWOn5s/WoEcbqEIWPI/AAAAAAAAWXo/h8U_GHIW75obyskVvwgGQlD3ji0gjU7NACLcBGAs/s300/will-google-close-blogger-business-analysis.jpg",
title: "pic 2"
}, {
src: "https://4.bp.blogspot.com/-Vp6_fuEU8zM/V7vRUTEb-HI/AAAAAAAAOJE/9YVKsFPH6Tk1ADOnOK_yU44EXCthIY75gCLcB/s1600/blogger-free-consultant.jpg",
srct: "https://4.bp.blogspot.com/-Vp6_fuEU8zM/V7vRUTEb-HI/AAAAAAAAOJE/9YVKsFPH6Tk1ADOnOK_yU44EXCthIY75gCLcB/s300/blogger-free-consultant.jpg",
title: "pic 3"
}, {
src: "https://1.bp.blogspot.com/-Kix19BaDmNE/Wy4Y_U_3uPI/AAAAAAAAXPY/nIwxapAva4QVDYpZLcFssWe4_q7KkDvVgCLcBGAs/s1600/mobile-detect-webview-fb-line-in-app.jpg",
srct: "https://1.bp.blogspot.com/-Kix19BaDmNE/Wy4Y_U_3uPI/AAAAAAAAXPY/nIwxapAva4QVDYpZLcFssWe4_q7KkDvVgCLcBGAs/s300/mobile-detect-webview-fb-line-in-app.jpg",
title: "pic 4"
}, {
src: "https://1.bp.blogspot.com/-G607thP7cWc/XDg22TxSSUI/AAAAAAAAYLc/bWQMrxhgneEBSKKiJ3TCuqYnxpcAyofVACLcBGAs/s1600/picasa-url-parameter.jpg",
srct: "https://1.bp.blogspot.com/-G607thP7cWc/XDg22TxSSUI/AAAAAAAAYLc/bWQMrxhgneEBSKKiJ3TCuqYnxpcAyofVACLcBGAs/s300/picasa-url-parameter.jpg",
title: "pic 5"
},{
src: "https://1.bp.blogspot.com/-fuPZuDAdv4s/XGN84O7JSkI/AAAAAAAAYV0/1LcgeouMQ18tWegvK11vz1qHDweOLtXZACLcBGAs/s1600/github-api-upload-file.jpg",
srct: "https://1.bp.blogspot.com/-fuPZuDAdv4s/XGN84O7JSkI/AAAAAAAAYV0/1LcgeouMQ18tWegvK11vz1qHDweOLtXZACLcBGAs/s300/github-api-upload-file.jpg",
title: "pic 6"
}, {
src: "https://2.bp.blogspot.com/-Bc-JyEZwpG4/W6LTpxNm2mI/AAAAAAAAXpg/Tf-GhNpvFLICCg_6ICW3y4Er4trMozW3gCLcBGAs/s1600/seo-fake-information-identification.jpg",
srct: "https://2.bp.blogspot.com/-Bc-JyEZwpG4/W6LTpxNm2mI/AAAAAAAAXpg/Tf-GhNpvFLICCg_6ICW3y4Er4trMozW3gCLcBGAs/s300/seo-fake-information-identification.jpg",
title: "pic 7"
}, {
src: "https://3.bp.blogspot.com/-lo1NZ0KVZSU/WRrNvclwESI/AAAAAAAAPjQ/k50YaNha-1YlzwU0qtHwbhBoLfXPll1iACLcB/s1600/how-to-become-top-blog-writer.jpg",
srct: "https://3.bp.blogspot.com/-lo1NZ0KVZSU/WRrNvclwESI/AAAAAAAAPjQ/k50YaNha-1YlzwU0qtHwbhBoLfXPll1iACLcB/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://4.bp.blogspot.com/-1g7zj-oB-s4/XFO0dywZTVI/AAAAAAAAYRk/_t7XrH7YtQoCp67gHxZ4pskAHX9TUnqHQCLcBGAs/s1600/cc0-image-stock-license.jpg",
srct: "https://4.bp.blogspot.com/-1g7zj-oB-s4/XFO0dywZTVI/AAAAAAAAYRk/_t7XrH7YtQoCp67gHxZ4pskAHX9TUnqHQCLcBGAs/s300/cc0-image-stock-license.jpg",
title: "pic 1"
}, {
src: "https://2.bp.blogspot.com/-MQgmDdWOn5s/WoEcbqEIWPI/AAAAAAAAWXo/h8U_GHIW75obyskVvwgGQlD3ji0gjU7NACLcBGAs/s1600/will-google-close-blogger-business-analysis.jpg",
srct: "https://2.bp.blogspot.com/-MQgmDdWOn5s/WoEcbqEIWPI/AAAAAAAAWXo/h8U_GHIW75obyskVvwgGQlD3ji0gjU7NACLcBGAs/s300/will-google-close-blogger-business-analysis.jpg",
title: "pic 2"
}, {
src: "https://4.bp.blogspot.com/-Vp6_fuEU8zM/V7vRUTEb-HI/AAAAAAAAOJE/9YVKsFPH6Tk1ADOnOK_yU44EXCthIY75gCLcB/s1600/blogger-free-consultant.jpg",
srct: "https://4.bp.blogspot.com/-Vp6_fuEU8zM/V7vRUTEb-HI/AAAAAAAAOJE/9YVKsFPH6Tk1ADOnOK_yU44EXCthIY75gCLcB/s300/blogger-free-consultant.jpg",
title: "pic 3"
}, {
src: "https://1.bp.blogspot.com/-Kix19BaDmNE/Wy4Y_U_3uPI/AAAAAAAAXPY/nIwxapAva4QVDYpZLcFssWe4_q7KkDvVgCLcBGAs/s1600/mobile-detect-webview-fb-line-in-app.jpg",
srct: "https://1.bp.blogspot.com/-Kix19BaDmNE/Wy4Y_U_3uPI/AAAAAAAAXPY/nIwxapAva4QVDYpZLcFssWe4_q7KkDvVgCLcBGAs/s300/mobile-detect-webview-fb-line-in-app.jpg",
title: "pic 4"
}, {
src: "https://1.bp.blogspot.com/-G607thP7cWc/XDg22TxSSUI/AAAAAAAAYLc/bWQMrxhgneEBSKKiJ3TCuqYnxpcAyofVACLcBGAs/s1600/picasa-url-parameter.jpg",
srct: "https://1.bp.blogspot.com/-G607thP7cWc/XDg22TxSSUI/AAAAAAAAYLc/bWQMrxhgneEBSKKiJ3TCuqYnxpcAyofVACLcBGAs/s300/picasa-url-parameter.jpg",
title: "pic 5"
}, {
src: "https://1.bp.blogspot.com/-fuPZuDAdv4s/XGN84O7JSkI/AAAAAAAAYV0/1LcgeouMQ18tWegvK11vz1qHDweOLtXZACLcBGAs/s1600/github-api-upload-file.jpg",
srct: "https://1.bp.blogspot.com/-fuPZuDAdv4s/XGN84O7JSkI/AAAAAAAAYV0/1LcgeouMQ18tWegvK11vz1qHDweOLtXZACLcBGAs/s300/github-api-upload-file.jpg",
title: "pic 6"
}, {
src: "https://2.bp.blogspot.com/-Bc-JyEZwpG4/W6LTpxNm2mI/AAAAAAAAXpg/Tf-GhNpvFLICCg_6ICW3y4Er4trMozW3gCLcBGAs/s1600/seo-fake-information-identification.jpg",
srct: "https://2.bp.blogspot.com/-Bc-JyEZwpG4/W6LTpxNm2mI/AAAAAAAAXpg/Tf-GhNpvFLICCg_6ICW3y4Er4trMozW3gCLcBGAs/s300/seo-fake-information-identification.jpg",
title: "pic 7"
}, {
src: "https://3.bp.blogspot.com/-lo1NZ0KVZSU/WRrNvclwESI/AAAAAAAAPjQ/k50YaNha-1YlzwU0qtHwbhBoLfXPll1iACLcB/s1600/how-to-become-top-blog-writer.jpg",
srct: "https://3.bp.blogspot.com/-lo1NZ0KVZSU/WRrNvclwESI/AAAAAAAAPjQ/k50YaNha-1YlzwU0qtHwbhBoLfXPll1iACLcB/s300/how-to-become-top-blog-writer.jpg",
title: "pic 8"
}, {
src: "https://4.bp.blogspot.com/-1g7zj-oB-s4/XFO0dywZTVI/AAAAAAAAYRk/_t7XrH7YtQoCp67gHxZ4pskAHX9TUnqHQCLcBGAs/s1600/cc0-image-stock-license.jpg",
srct: "https://4.bp.blogspot.com/-1g7zj-oB-s4/XFO0dywZTVI/AAAAAAAAYRk/_t7XrH7YtQoCp67gHxZ4pskAHX9TUnqHQCLcBGAs/s300/cc0-image-stock-license.jpg",
title: "pic 1"
}, {
src: "https://2.bp.blogspot.com/-MQgmDdWOn5s/WoEcbqEIWPI/AAAAAAAAWXo/h8U_GHIW75obyskVvwgGQlD3ji0gjU7NACLcBGAs/s1600/will-google-close-blogger-business-analysis.jpg",
srct: "https://2.bp.blogspot.com/-MQgmDdWOn5s/WoEcbqEIWPI/AAAAAAAAWXo/h8U_GHIW75obyskVvwgGQlD3ji0gjU7NACLcBGAs/s300/will-google-close-blogger-business-analysis.jpg",
title: "pic 2"
}, {
src: "https://4.bp.blogspot.com/-Vp6_fuEU8zM/V7vRUTEb-HI/AAAAAAAAOJE/9YVKsFPH6Tk1ADOnOK_yU44EXCthIY75gCLcB/s1600/blogger-free-consultant.jpg",
srct: "https://4.bp.blogspot.com/-Vp6_fuEU8zM/V7vRUTEb-HI/AAAAAAAAOJE/9YVKsFPH6Tk1ADOnOK_yU44EXCthIY75gCLcB/s300/blogger-free-consultant.jpg",
title: "pic 3"
}, {
src: "https://1.bp.blogspot.com/-Kix19BaDmNE/Wy4Y_U_3uPI/AAAAAAAAXPY/nIwxapAva4QVDYpZLcFssWe4_q7KkDvVgCLcBGAs/s1600/mobile-detect-webview-fb-line-in-app.jpg",
srct: "https://1.bp.blogspot.com/-Kix19BaDmNE/Wy4Y_U_3uPI/AAAAAAAAXPY/nIwxapAva4QVDYpZLcFssWe4_q7KkDvVgCLcBGAs/s300/mobile-detect-webview-fb-line-in-app.jpg",
title: "pic 4"
}, {
src: "https://1.bp.blogspot.com/-G607thP7cWc/XDg22TxSSUI/AAAAAAAAYLc/bWQMrxhgneEBSKKiJ3TCuqYnxpcAyofVACLcBGAs/s1600/picasa-url-parameter.jpg",
srct: "https://1.bp.blogspot.com/-G607thP7cWc/XDg22TxSSUI/AAAAAAAAYLc/bWQMrxhgneEBSKKiJ3TCuqYnxpcAyofVACLcBGAs/s300/picasa-url-parameter.jpg",
title: "pic 5"
}]
});
</script>
<style>.nGY2 .nGY2GThumbnail { background: #444; }</style>


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





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

沒有留言:

張貼留言注意事項:

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

TOP