react有很多好玩的元件,react-grid-gallery就是其中一個,主要處理圖片展示,對圖片進行放大與縮小
文件:https://www.npmjs.com/package/react-grid-gallery
demo:https://benhowell.github.io/react-grid-gallery
gallery的options
images: 圖片路徑
結構為: [{
src: imgUrl,
thumbnail: imgUrl,
}, {
src: imgUrl,
thumbnail: imgUrl,
}, {
src: imgUrl,
thumbnail: imgUrl,
}]
backdropClosesModal: 使用者點選背景是否會隱藏掉modal(boolean)
showCloseButton: 是否顯示關閉按鈕(boolean)
backdropClosesModal與showCloseButton可以配合使用,達到想要的效果
images中也有一些option
thumbnailWidth:圖片寬度
thumbnailHeight: 圖片高度
caption: 圖片的標題