nanogallery2
https://github.com/nanostudio-org/nanogallery2
nanogallery2 web
https://nanogallery2.nanostudio.org/
nanogallery2 builder
https://nanogallery2.nanostudio.org/builder.html
jQuery 相簿畫廊外掛 nanogallery2﹍排版效果與功能都十分強大
https://www.wfublog.com/2019/06/jquery-gallery-grid-plugin-nanogallery.html
nanogallery2 為基於 jQuery 的展示相簿瀏覽器，可創建高質感與兼具功能性的照片畫廊。
以下為單html檔測試範例︰
載入後畫面為︰
#Javascript, jQuery, nanogallery2, 照片, 畫廊, 相簿, 瀏覽
https://github.com/nanostudio-org/nanogallery2
nanogallery2 web
https://nanogallery2.nanostudio.org/
nanogallery2 builder
https://nanogallery2.nanostudio.org/builder.html
jQuery 相簿畫廊外掛 nanogallery2﹍排版效果與功能都十分強大
https://www.wfublog.com/2019/06/jquery-gallery-grid-plugin-nanogallery.html
nanogallery2 為基於 jQuery 的展示相簿瀏覽器，可創建高質感與兼具功能性的照片畫廊。
以下為單html檔測試範例︰
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link href="https://unpkg.com/nanogallery2@2.4.1/dist/css/nanogallery2.min.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="https://unpkg.com/nanogallery2@2.4.1/dist/jquery.nanogallery2.core.min.js"></script>
</head>
<body style="padding:10;margin:0;">
<div id="app"></div>
<script>
let imgs = [
'https://images.freeimages.com/images/large-previews/8a1/small-waterfall-1376352.jpg',
'https://images.freeimages.com/images/large-previews/c53/yellowstone-river-1361768.jpg',
'https://images.freeimages.com/images/large-previews/f2c/effi-1-1366221.jpg',
'https://images.freeimages.com/images/large-previews/9f9/selfridges-2-1470748.jpg',
'https://images.freeimages.com/images/large-previews/fa7/in-prayer-1313108.jpg',
'https://images.freeimages.com/images/large-previews/371/swiss-mountains-1362975.jpg',
'https://images.freeimages.com/images/large-previews/535/natural-wonders-1400924.jpg',
'https://images.freeimages.com/images/large-previews/f5d/butterfly-1378183.jpg',
'https://images.freeimages.com/images/large-previews/e2a/boise-downtown-1387405.jpg',
'https://images.freeimages.com/images/large-previews/8a5/red-tulip-2-1401227.jpg',
'https://images.freeimages.com/images/large-previews/bf4/the-road-through-the-woods-1449194.jpg',
'https://images.freeimages.com/images/large-previews/4dc/street-1366583.jpg',
'https://images.freeimages.com/images/large-previews/977/beach-1364350.jpg',
'https://images.freeimages.com/images/large-previews/07a/beach-soft-light-1379401.jpg',
'https://images.freeimages.com/images/large-previews/815/xmas-bunny-1313404.jpg',
'https://images.freeimages.com/images/large-previews/ed3/a-stormy-paradise-1-1563744.jpg',
'https://images.freeimages.com/images/large-previews/fb3/grass-1379193.jpg',
'https://images.freeimages.com/images/large-previews/56e/hibiscus-1393855.jpg',
'https://images.freeimages.com/images/large-previews/6d5/lake-at-the-cottage-1372381.jpg',
'https://images.freeimages.com/images/large-previews/3a6/rain-on-sea-ii-1368899.jpg',
'https://images.freeimages.com/images/large-previews/e71/frog-1371919.jpg',
'https://images.freeimages.com/images/large-previews/b5a/dragon-fly-1391358.jpg',
'https://images.freeimages.com/images/large-previews/901/butterfly-dress-1520606.jpg',
'https://images.freeimages.com/images/large-previews/39a/no-grain-no-pain-1326753.jpg',
'https://images.freeimages.com/images/large-previews/56c/salat-tomato-cheese-on-bread-1322759.jpg',
'https://images.freeimages.com/images/large-previews/503/fruit-in-the-country-3-1323660.jpg',
'https://images.freeimages.com/images/large-previews/bf2/fields-1-1370990.jpg',
'https://images.freeimages.com/images/large-previews/e93/skyscrapers-1219500.jpg',
'https://images.freeimages.com/images/large-previews/773/koldalen-4-1384902.jpg',
'https://images.freeimages.com/images/large-previews/8b3/palm-and-pier-1390929.jpg',
'https://images.freeimages.com/images/large-previews/5a3/milky-droplet-2-1190386.jpg',
'https://images.freeimages.com/images/large-previews/4ad/snare-drum-second-take-1-1564542.jpg',
'https://images.freeimages.com/images/large-previews/4f3/verde-que-te-quiero-verde-1-1408392.jpg',
'https://images.freeimages.com/images/large-previews/313/coffee-1559191.jpg',
'https://images.freeimages.com/images/large-previews/8a8/yellow-galben-1518220.jpg',
'https://images.freeimages.com/images/large-previews/e7e/orange-portocaliu-1518994.jpg',
'https://images.freeimages.com/images/large-previews/6bd/laundry-1522596.jpg',
'https://images.freeimages.com/images/large-previews/2c8/glassy-1538117.jpg',
'https://images.freeimages.com/images/large-previews/098/naive-art-paintings-naife-artworks-painting-raphael-perez-painter-landscape-artowkrs-1637257.jpg',
'https://a-z-animals.com/media/animals/images/470x370/frog4.jpg',
'https://www.spirit-animals.com/wp-content/uploads/2013/03/Frog-2-1024x768.jpg',
'https://images.pexels.com/photos/162140/duckling-birds-yellow-fluffy-162140.jpeg?cs=srgb&dl=animal-beak-bird-162140.jpg&fm=jpg',
'https://animals.sandiegozoo.org/sites/default/files/2016-08/category-thumbnail-mammals_0.jpg',
'https://ichef.bbci.co.uk/images/ic/976x549/p04f5x5v.jpg',
'https://cdn.theatlantic.com/assets/media/img/mt/2018/10/GettyImages_939413302/lead_720_405.jpg?mod=1541011155',
'https://www.rspcansw.org.au/wp-content/uploads/2017/04/7_a-feature_adopt_mobile-1.jpg',
'https://www.iata.org/whatwedo/cargo/PublishingImages/cargo_live_animals_parrot.jpg',
'https://www.marwell.org.uk/images/main-images/white-rhino.jpg',
'https://www.gvi.co.uk/wp-content/uploads/2016/05/2-1.png',
'https://www.mlar.org/media/1165/dustin-1.jpg',
'https://www.rd.com/wp-content/uploads/2018/06/Deer-fawn-portrait-760x506.jpg',
]
//items, 轉為nanogallery2所需輸入item格式
let items=imgs.map(function(src){
src=src.replace(/\\/g,'\\\\')
let title=src.split('/').pop()
return {
src: src,
srct: src,
title: title
}
})
//nColPic, 每列圖片數量
let nColPic=4
//w, 取得body寬度
let w=$('body').width()
//tw, 計算圖片寬度
let tw=Math.floor((w-(nColPic+1)*2-nColPic*3)/nColPic)
$("#app").nanogallery2({
"thumbnailWidth": tw,
"thumbnailHeight": "auto",
"thumbnailBorderVertical": 0,
"thumbnailBorderHorizontal": 0,
"colorScheme": {
"thumbnail": {
"background": "rgba(0,0,0,0)"
}
},
"thumbnailDisplayTransition": "scaleDown",
"thumbnailDisplayTransitionDuration": 300,
"thumbnailDisplayInterval": 50,
"thumbnailLabel": {
"display": false
},
"thumbnailHoverEffect2": "scale120|borderLighter|labelOpacity50",
"thumbnailAlignment": "center",
"items": items,
});
</script>
</body>
</html>
載入後畫面為︰
#Javascript, jQuery, nanogallery2, 照片, 畫廊, 相簿, 瀏覽
留言
張貼留言