Quantcast
Channel: WFU BLOG
Viewing all articles
Browse latest Browse all 571
↧

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

August 24, 2019, 5:27 pm
$
0
0
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>

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





更多圖片展示工具：

----
如這篇文章對您有幫助，請順手按個 +1 或分享，謝謝！
↧
Search
Viewing all articles
Browse latest Browse all 571

Trending Articles

《沈冰自述——我和周永康的故事》全本

February 8, 2015, 9:08 pm

Moog - Subsequent 25

January 16, 2020, 12:00 am

出售: 林憶蓮•回來愛的身邊 (東芝1A1頭版)

March 9, 2013, 11:02 am

筆記 - 使用 PowerShell 清除停用 AD 帳號與 OU

July 16, 2019, 11:03 pm

df-dferh-01 中国区 Android 安装 Google Play Store 后报错 的 解决办法

April 24, 2019, 6:56 am

「一棒接一棒、棒棒強棒」108學年度家長會長交接典禮

October 28, 2019, 8:49 pm

吸烟与MBTI类型判断捷径 (豆瓣 INFJ的奇幻之旅小组)

December 28, 2017, 6:55 pm

acermark龍璿國際 展出多款包裝設備

April 18, 2016, 6:02 am

枋寮北勢寮隆山宮 睽違12年再辦迎王祭典

October 15, 2018, 6:03 am

日本女优有村千佳COS集锦：狂三&黑白岩&亚丝娜&绫波丽

September 4, 2013, 2:57 am

有遇到过这个问题么。/jsb-videoplayer.js not found, possible missing file.

June 23, 2020, 2:17 am

MAS v2.8 magicgenius 汉化版 - 11.11更新

November 10, 2024, 5:46 pm

出售: Monster Cable Interlink Reference 2

May 23, 2018, 2:00 am

福建佛教人士望云和尚(林斌)的九仙禅寺被强行收走，望云妈妈被赶出寺庙

August 17, 2015, 1:12 am

R 语言中的OpenBLAS*和英特尔® 数学核心函数库的性能比较

December 21, 2016, 9:38 pm

[转载]煞貢、直星、人專吉日\金神七煞歌

March 3, 2016, 6:37 am

HAKERS哈克士戶外 12月8~14日廠拍

December 6, 2016, 3:52 am

OBS Studio 23.2.1 免安裝中文版 - 免費網路實況廣播軟體 實況主必備軟體 取代Fraps

June 16, 2019, 8:10 am

<請教>行駛中安卓機會重新開機

August 5, 2018, 7:25 am

Udp2raw-tunnel 及其一键安装脚本

October 23, 2017, 6:46 pm
Search