From bfd79756522f6c159b4dd180f770375c10c09546 Mon Sep 17 00:00:00 2001 From: ehinrichs <54997013+ehinrichs@users.noreply.github.com> Date: Fri, 31 May 2024 10:43:54 -0600 Subject: [PATCH] switching lightbox dependency switching lightbox dependency --- content/pages/gallery/index.mdx | 17 +- package-lock.json | 215 +++++------------- package.json | 3 +- src/components/image-gallery/Gallery.js | 103 +++++---- .../image-gallery/GallerySection.js | 62 +++++ static/photo-gallery/gallery-metadata.json | 64 +++--- 6 files changed, 215 insertions(+), 249 deletions(-) create mode 100644 src/components/image-gallery/GallerySection.js diff --git a/content/pages/gallery/index.mdx b/content/pages/gallery/index.mdx index 7d3cf95..cf28dbe 100644 --- a/content/pages/gallery/index.mdx +++ b/content/pages/gallery/index.mdx @@ -6,7 +6,7 @@ slug: "/gallery" import photoJSON from "/static/photo-gallery/gallery-metadata.json" import PhotoGallery from "/src/components/image-gallery/Gallery.js" import "/src/components/image-gallery/styles.css" -import { Box, Grid} from "theme-ui" +import { Box, Grid, Text } from "theme-ui"
@@ -16,18 +16,17 @@ import { Box, Grid} from "theme-ui"
--- -### Contaminant Transport at Legacy Waste Sites - + -### Matrix-Fracture Flow and Transport - -### Thermal Hydrology in the Arctic + - -### Watersheds - \ No newline at end of file + + + + + diff --git a/package-lock.json b/package-lock.json index dbb05f5..e2a4f7e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,7 +11,6 @@ "dependencies": { "@emotion/react": "^11.11.4", "@lekoarts/gatsby-theme-minimal-blog": "^6.2.3", - "@theme-ui/color-modes": "^0.16.2", "citation-js": "^0.7.12", "gatsby": "^5.13.6", "gatsby-plugin-feed": "^5.13.1", @@ -23,7 +22,7 @@ "react": "^18.3.1", "react-dom": "^18.3.1", "react-image-gallery": "^1.3.0", - "react-lightgallery": "^0.9.0" + "react-lightbox-pack": "^0.2.1" }, "devDependencies": { "@types/node": "^20.12.13", @@ -3039,9 +3038,9 @@ "integrity": "sha512-yemX0ZD2xS/73llMZIK6KplkjIjf2EvAHcinDi/TfJ9hS25G0388+ClHt6/3but0oOxinTcQHJLDXh6w1crzFQ==" }, "node_modules/@lezer/lr": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.4.0.tgz", - "integrity": "sha512-Wst46p51km8gH0ZUmeNrtpRYmdlRHUpN1DQd3GFAyKANi8WVz8c2jHYTf1CVScFaCjQw1iO3ZZdqGDxQPRErTg==", + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.4.1.tgz", + "integrity": "sha512-CHsKq8DMKBf9b3yXPDIU4DbH+ZJd/sJdYOW2llbW/HudP5u0VS6Bfq1hLYfgU7uAYGFIyGGQIsSOXGPEErZiJw==", "dependencies": { "@lezer/common": "^1.0.0" } @@ -4810,43 +4809,19 @@ } }, "node_modules/@theme-ui/color-modes": { - "version": "0.16.2", - "resolved": "https://registry.npmjs.org/@theme-ui/color-modes/-/color-modes-0.16.2.tgz", - "integrity": "sha512-jWEWx53lxNgWCT38i/kwLV2rsvJz8lVZgi5oImnVwYba9VejXD23q1ckbNFJHosQ8KKXY87ht0KPC6BQFIiHtQ==", - "dependencies": { - "@theme-ui/core": "^0.16.2", - "@theme-ui/css": "^0.16.2", - "deepmerge": "^4.2.2" - }, - "peerDependencies": { - "@emotion/react": "^11.11.1", - "react": ">=18" - } - }, - "node_modules/@theme-ui/color-modes/node_modules/@theme-ui/core": { - "version": "0.16.2", - "resolved": "https://registry.npmjs.org/@theme-ui/core/-/core-0.16.2.tgz", - "integrity": "sha512-bBd/ltbwO9vIUjF1jtlOX6XN0IIOdf1vzBp2JCKsSOqdfn84m+XL8OogIe/zOhQ+aM94Nrq4+32tFJc8sFav4Q==", + "version": "0.15.7", + "resolved": "https://registry.npmjs.org/@theme-ui/color-modes/-/color-modes-0.15.7.tgz", + "integrity": "sha512-iF44OeCJD7+Fq+JiVaCkG0dqJJlksF39u3trEP2PyZ2GVkZE9j9UZh5/AozFnfGXek4T0I8Pn6lyNbs0lAEOrQ==", "dependencies": { - "@theme-ui/css": "^0.16.2", + "@theme-ui/core": "^0.15.7", + "@theme-ui/css": "^0.15.7", "deepmerge": "^4.2.2" }, "peerDependencies": { - "@emotion/react": "^11.11.1", + "@emotion/react": "^11", "react": ">=18" } }, - "node_modules/@theme-ui/color-modes/node_modules/@theme-ui/css": { - "version": "0.16.2", - "resolved": "https://registry.npmjs.org/@theme-ui/css/-/css-0.16.2.tgz", - "integrity": "sha512-fNe+FhwKC5+7jQfxCRnm3oqYNhMFuiWiLA9OoLBEkt3b4egot29UK1+fqemwiNVjl206e2fPT5Z7uXRdb6LC2A==", - "dependencies": { - "csstype": "^3.0.10" - }, - "peerDependencies": { - "@emotion/react": "^11.11.1" - } - }, "node_modules/@theme-ui/components": { "version": "0.15.7", "resolved": "https://registry.npmjs.org/@theme-ui/components/-/components-0.15.7.tgz", @@ -4936,20 +4911,6 @@ "react": ">=18" } }, - "node_modules/@theme-ui/theme-provider/node_modules/@theme-ui/color-modes": { - "version": "0.15.7", - "resolved": "https://registry.npmjs.org/@theme-ui/color-modes/-/color-modes-0.15.7.tgz", - "integrity": "sha512-iF44OeCJD7+Fq+JiVaCkG0dqJJlksF39u3trEP2PyZ2GVkZE9j9UZh5/AozFnfGXek4T0I8Pn6lyNbs0lAEOrQ==", - "dependencies": { - "@theme-ui/core": "^0.15.7", - "@theme-ui/css": "^0.15.7", - "deepmerge": "^4.2.2" - }, - "peerDependencies": { - "@emotion/react": "^11", - "react": ">=18" - } - }, "node_modules/@tokenizer/token": { "version": "0.3.0", "resolved": "https://registry.npmjs.org/@tokenizer/token/-/token-0.3.0.tgz", @@ -6610,11 +6571,6 @@ "node": ">=8" } }, - "node_modules/browser-or-node": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/browser-or-node/-/browser-or-node-1.3.0.tgz", - "integrity": "sha512-0F2z/VSnLbmEeBcUrSuDH5l0HxTXdQQzLjkmBR4cYfvg1zJrKSlmIZFqyFR8oX0NrwPhy3c3HQ6i3OxMbew4Tg==" - }, "node_modules/browserslist": { "version": "4.23.0", "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.0.tgz", @@ -7024,9 +6980,9 @@ "integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==" }, "node_modules/chrome-trace-event": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz", - "integrity": "sha512-p3KULyQg4S7NIHixdwbGX+nFHkoBiA4YQmyWtjb8XngSKV124nJmRysgAeujbUVb15vh+RvFUfCPqU7rXk+hZg==", + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.4.tgz", + "integrity": "sha512-rNjApaLzuwaOTjCiT8lSDdGN1APCiqkChLMJxJPWLunPAt5fy8xgU9/jNOchV84wfIxrA0lRQB7oCT8jrn/wrQ==", "engines": { "node": ">=6.0" } @@ -8005,9 +7961,9 @@ } }, "node_modules/debug": { - "version": "4.3.4", - "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", - "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==", + "version": "4.3.5", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.5.tgz", + "integrity": "sha512-pt0bNEmneDIvdL1Xsd9oDQ/wrQRkXDT4AUWlNZNPKvW5x/jyO9VFXkJUP07vQ2upmw5PlaITaPKc31jK13V+jg==", "dependencies": { "ms": "2.1.2" }, @@ -8443,9 +8399,9 @@ "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==" }, "node_modules/electron-to-chromium": { - "version": "1.4.783", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.783.tgz", - "integrity": "sha512-bT0jEz/Xz1fahQpbZ1D7LgmPYZ3iHVY39NcWWro1+hA2IvjiPeaXtfSqrQ+nXjApMvQRE2ASt1itSLRrebHMRQ==" + "version": "1.4.787", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.787.tgz", + "integrity": "sha512-d0EFmtLPjctczO3LogReyM2pbBiiZbnsKnGF+cdZhsYzHm/A0GV7W94kqzLD8SN4O3f3iHlgLUChqghgyznvCQ==" }, "node_modules/emoji-regex": { "version": "9.2.2", @@ -13749,51 +13705,6 @@ "node": ">= 0.8.0" } }, - "node_modules/lg-autoplay.js": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/lg-autoplay.js/-/lg-autoplay.js-1.2.0.tgz", - "integrity": "sha512-B7KGZhaq69Kv+SGAKb7kmOT3E0CJBFTa3HnmQFSVjpn1tkWm7GtcDRXYtEDcjRSixFHN6M0X/uFji/4uYk6vpg==" - }, - "node_modules/lg-fullscreen.js": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/lg-fullscreen.js/-/lg-fullscreen.js-1.2.0.tgz", - "integrity": "sha512-cn4aOV4kuBAdtWJ7VcmmNfnIlNOF9pfa58Y708viZo9DrFQP3rDrwgx3fnol7GlBH+C/LwnGxy+bjaD4Abv3zg==" - }, - "node_modules/lg-hash.js": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/lg-hash.js/-/lg-hash.js-1.0.0.tgz", - "integrity": "sha512-jQpYGfaz/dSKclxmb1J2kw5vjP6jL7wqKiN6hf2yR3Czyu+5vErbjxTME+k6RVhooizJpzcFj98oFWKx2B+Rgw==" - }, - "node_modules/lg-pager.js": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/lg-pager.js/-/lg-pager.js-1.0.0.tgz", - "integrity": "sha512-3ctcouJNewQe38YwDZNfxUXOKarawqjZ0ZmV5xyzpcR/Fks87V2CQ8qo+/yJ5NY4AwGzX6+ZKbqEDwkfTV3nkg==" - }, - "node_modules/lg-share.js": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/lg-share.js/-/lg-share.js-1.3.0.tgz", - "integrity": "sha512-5pnbiZ/LdBZiPhvVp/EAnod2yrBczN2YCqvM6f4TX4VbPe4b/9r0jJtvBvxOPMAxRNZrF3/WvOnHcFfvdSc4uA==" - }, - "node_modules/lg-thumbnail.js": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/lg-thumbnail.js/-/lg-thumbnail.js-1.2.0.tgz", - "integrity": "sha512-qmNFbjLv1spCf3sB8HRX9vW8UtKcgq7qJIg10jLqCozSquhTJwSPUb5vyPgl3cZpgLFjRMiOpIRgBjGrX4inNQ==" - }, - "node_modules/lg-video.js": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/lg-video.js/-/lg-video.js-1.3.0.tgz", - "integrity": "sha512-9P/oxBwHhEqHvPqnjxdQFihMw6AlIllHdOXUDAsr+t6D9u9Bcabsncavap6B8QeCVS+uU2wmgW9GFTfT5sg5Vg==" - }, - "node_modules/lg-zoom.js": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/lg-zoom.js/-/lg-zoom.js-1.3.0.tgz", - "integrity": "sha512-qoI0gH+jWw58O6BhJdGWDY2LD4bymp5aEoyGoXhn/KzAcHV2o0RynPMcV0v3RGvpDottISr9Sa2cyAm2hAdxRQ==" - }, - "node_modules/lightgallery.js": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/lightgallery.js/-/lightgallery.js-1.4.0.tgz", - "integrity": "sha512-TK7auNMSz0sPjotq/VtKH/fe8GPkVRlmFf8F3zVsbFccLJL4r3U1VON+IggyE8Wy04QwbFQxTIIMqL7blibGSA==" - }, "node_modules/lilconfig": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz", @@ -16021,9 +15932,9 @@ } }, "node_modules/node-abi": { - "version": "3.62.0", - "resolved": "https://registry.npmjs.org/node-abi/-/node-abi-3.62.0.tgz", - "integrity": "sha512-CPMcGa+y33xuL1E0TcNIu4YyaZCxnnvkVaEXrsosR3FxN+fV8xvb7Mzpb7IgKler10qeMkE6+Dp8qJhpzdq35g==", + "version": "3.63.0", + "resolved": "https://registry.npmjs.org/node-abi/-/node-abi-3.63.0.tgz", + "integrity": "sha512-vAszCsOUrUxjGAmdnM/pq7gUgie0IRteCQMX6d4A534fQCR93EJU5qgzBvU6EkFfK27s0T3HEV3BOyJIr7OMYw==", "dependencies": { "semver": "^7.3.5" }, @@ -18008,9 +17919,9 @@ } }, "node_modules/react-dev-utils/node_modules/loader-utils": { - "version": "3.2.1", - "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-3.2.1.tgz", - "integrity": "sha512-ZvFw1KWS3GVyYBYb7qkmRM/WwL2TQQBxgCK62rlvm4WpVQ23Nb4tYjApUlfjrEGvOs7KHEsmyUn75OHZrJMWPw==", + "version": "3.2.2", + "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-3.2.2.tgz", + "integrity": "sha512-vjJi4vQDasD8t0kMpxe+9URAcgbSuASqoj/Wuk3MawTk97LYa2KfdHreAkd1G/pmPLMvzZEw7/OsydADNemerQ==", "engines": { "node": ">= 12.13.0" } @@ -18089,29 +18000,19 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, - "node_modules/react-lightgallery": { - "version": "0.9.0", - "resolved": "https://registry.npmjs.org/react-lightgallery/-/react-lightgallery-0.9.0.tgz", - "integrity": "sha512-RgUPXBDu1wQT+BJ4jBAZ5qhSu35/Wx4ZzMBwDDE1gqQeBKHWZAvrljWJRw6cJYudG1cgOzKF2EHV+7+8rVzpLg==", - "dependencies": { - "browser-or-node": "^1.3.0", - "hoist-non-react-statics": "^3.3.2", - "lg-autoplay.js": "^1.2.0", - "lg-fullscreen.js": "^1.2.0", - "lg-hash.js": "^1.0.0", - "lg-pager.js": "^1.0.0", - "lg-share.js": "^1.3.0", - "lg-thumbnail.js": "^1.2.0", - "lg-video.js": "^1.2.0", - "lg-zoom.js": "^1.2.0", - "lightgallery.js": "^1.2.0", - "lodash": "^4.17.15", - "prop-types": "^15.7.2", - "uniqid": "^5.2.0" + "node_modules/react-lightbox-pack": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/react-lightbox-pack/-/react-lightbox-pack-0.2.1.tgz", + "integrity": "sha512-ces0LRhtnF2h/gj6DADGex5l5iHW1y/LmH1nKNZB3MqSqiH7WDLfaXtzMjdE1KSHopvScukDiLvlMc5kNb+qEg==", + "dependencies": { + "react": "^18.2.0", + "react-dom": "^18.2.0" + }, + "engines": { + "node": ">=10" }, "peerDependencies": { - "react": "^16.13.1", - "react-dom": "^16.13.1" + "react": "^16.0.0 || ^18.0.0" } }, "node_modules/react-refresh": { @@ -20074,12 +19975,13 @@ } }, "node_modules/streamx": { - "version": "2.16.1", - "resolved": "https://registry.npmjs.org/streamx/-/streamx-2.16.1.tgz", - "integrity": "sha512-m9QYj6WygWyWa3H1YY69amr4nVgy61xfjys7xO7kviL5rfIEc2naf+ewFiOA+aEJD7y0JO3h2GoiUv4TDwEGzQ==", + "version": "2.18.0", + "resolved": "https://registry.npmjs.org/streamx/-/streamx-2.18.0.tgz", + "integrity": "sha512-LLUC1TWdjVdn1weXGcSxyTR3T4+acB6tVGXT95y0nGbca4t4o/ng1wKAGTljm9VicuCVLvRlqFYXYy5GwgM7sQ==", "dependencies": { - "fast-fifo": "^1.1.0", - "queue-tick": "^1.0.1" + "fast-fifo": "^1.3.2", + "queue-tick": "^1.0.1", + "text-decoder": "^1.1.0" }, "optionalDependencies": { "bare-events": "^2.2.0" @@ -20689,6 +20591,14 @@ "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz", "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==" }, + "node_modules/text-decoder": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/text-decoder/-/text-decoder-1.1.0.tgz", + "integrity": "sha512-TmLJNj6UgX8xcUZo4UDStGQtDiTzF7BzWlzn9g7UWrjkpHr5uJTK1ld16wZ3LXb2vb6jH8qU89dW5whuMdXYdw==", + "dependencies": { + "b4a": "^1.6.4" + } + }, "node_modules/text-table": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz", @@ -20710,20 +20620,6 @@ "react": ">=18" } }, - "node_modules/theme-ui/node_modules/@theme-ui/color-modes": { - "version": "0.15.7", - "resolved": "https://registry.npmjs.org/@theme-ui/color-modes/-/color-modes-0.15.7.tgz", - "integrity": "sha512-iF44OeCJD7+Fq+JiVaCkG0dqJJlksF39u3trEP2PyZ2GVkZE9j9UZh5/AozFnfGXek4T0I8Pn6lyNbs0lAEOrQ==", - "dependencies": { - "@theme-ui/core": "^0.15.7", - "@theme-ui/css": "^0.15.7", - "deepmerge": "^4.2.2" - }, - "peerDependencies": { - "@emotion/react": "^11", - "react": ">=18" - } - }, "node_modules/through": { "version": "2.3.8", "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz", @@ -20902,9 +20798,9 @@ } }, "node_modules/type": { - "version": "2.7.2", - "resolved": "https://registry.npmjs.org/type/-/type-2.7.2.tgz", - "integrity": "sha512-dzlvlNlt6AXU7EBSfpAscydQ7gXB+pPGsPnfJnZpiNJBDj7IaJzQlBZYGdEi4R9HmPdBv2XmWJ6YUtoTa7lmCw==" + "version": "2.7.3", + "resolved": "https://registry.npmjs.org/type/-/type-2.7.3.tgz", + "integrity": "sha512-8j+1QmAbPvLZow5Qpi6NCaN8FB60p/6x8/vfNqOk/hC+HuvFZhL4+WfekuhQLiqFZXOgQdrs3B+XxEmCc6b3FQ==" }, "node_modules/type-check": { "version": "0.4.0", @@ -21195,11 +21091,6 @@ "node": ">=4" } }, - "node_modules/uniqid": { - "version": "5.4.0", - "resolved": "https://registry.npmjs.org/uniqid/-/uniqid-5.4.0.tgz", - "integrity": "sha512-38JRbJ4Fj94VmnC7G/J/5n5SC7Ab46OM5iNtSstB/ko3l1b5g7ALt4qzHFgGciFkyiRNtDXtLNb+VsxtMSE77A==" - }, "node_modules/unique-string": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/unique-string/-/unique-string-2.0.0.tgz", diff --git a/package.json b/package.json index 557610f..d815c4e 100644 --- a/package.json +++ b/package.json @@ -18,7 +18,6 @@ "dependencies": { "@emotion/react": "^11.11.4", "@lekoarts/gatsby-theme-minimal-blog": "^6.2.3", - "@theme-ui/color-modes": "^0.16.2", "citation-js": "^0.7.12", "gatsby": "^5.13.6", "gatsby-plugin-feed": "^5.13.1", @@ -30,7 +29,7 @@ "react": "^18.3.1", "react-dom": "^18.3.1", "react-image-gallery": "^1.3.0", - "react-lightgallery": "^0.9.0" + "react-lightbox-pack": "^0.2.1" }, "devDependencies": { "@types/node": "^20.12.13", diff --git a/src/components/image-gallery/Gallery.js b/src/components/image-gallery/Gallery.js index 14ed5a9..3c5e29a 100644 --- a/src/components/image-gallery/Gallery.js +++ b/src/components/image-gallery/Gallery.js @@ -1,60 +1,63 @@ -import React from "react"; -import { LightgalleryProvider, LightgalleryItem } from "react-lightgallery"; -import "lightgallery.js/dist/css/lightgallery.min.css"; +import React, { useState } from "react"; +import { LightBox } from "react-lightbox-pack"; +import "react-lightbox-pack/dist/style.css"; import "./styles.css"; -let groupID = 0; +const PhotoGallery = ({ photos, title }) => { + const [toggle, setToggle] = useState(false); + const [sIndex, setSIndex] = useState(0); -const PhotoItem = ({ image, group, caption, thumb }) => ( -
- "+caption+""} style={{width: "192px", height: "129.8802681992337px", top: "6px", left: "6px", opacity: "1" }}> - thumbnail - -
-); + const lightBoxHandler = (state, index) => { + setToggle(state); + setSIndex(index); + }; -const PhotoGallery = ({photos}) => { - - groupID++; - const groupStr = "group" + groupID; - - function addPhotoItem(item,idx) { - return ( -
- -
- ); - } + const handleKeyDown = (event, index) => { + if (event.key === "Enter" || event.key === " ") { + lightBoxHandler(true, index); + } + }; return ( - { - console.log("onAfterSlide"); - }} - lightGallerySettings={{ - getCaptionFromTitleOrAlt: true, - thumbnail: true, - subHtmlSelectorRelative: true - }} - plugins={["lg-thumbnail.js"]} - > +
+

{title}

- { - photos.map((item, idx) => { - return ( - addPhotoItem(item,idx) - )} - ) - } + {photos.map((item, index) => ( +
lightBoxHandler(true, index)} + onKeyDown={(event) => handleKeyDown(event, index)} + tabIndex={0} + role="button" + aria-label={`View ${item.title}`} + > + {item.title} +
+ ))}
- + + ({ + id: item.id, + image: item.image, + title: item.title, + }))} + imageWidth="60vw" + imageHeight="70vh" + thumbnailHeight={50} + thumbnailWidth={50} + setImageIndex={setSIndex} + imageIndex={sIndex} + /> +
); -} +}; -export default PhotoGallery; \ No newline at end of file +export default PhotoGallery; diff --git a/src/components/image-gallery/GallerySection.js b/src/components/image-gallery/GallerySection.js new file mode 100644 index 0000000..a6ba134 --- /dev/null +++ b/src/components/image-gallery/GallerySection.js @@ -0,0 +1,62 @@ +import React, { useState } from "react"; +import { LightBox } from "react-lightbox-pack"; +import "react-lightbox-pack/dist/style.css"; +import "./styles.css"; + +const GallerySection = ({ gallery, title }) => { + const [toggle, setToggle] = useState(false); + const [sIndex, setSIndex] = useState(0); + + const lightBoxHandler = (state, index) => { + setToggle(state); + setSIndex(index); + }; + + const handleKeyDown = (event, index) => { + if (event.key === "Enter" || event.key === " ") { + lightBoxHandler(true, index); + } + }; + + return ( +
+
+ {gallery.map((item, index) => ( +
lightBoxHandler(true, index)} + onKeyDown={(event) => handleKeyDown(event, index)} + tabIndex={0} + role="button" + aria-label={`View ${item.title}`} + > + {item.title} +
+ ))} +
+ + ({ + id: item.id, + image: item.image, + title: item.title, + }))} + imageWidth="60vw" + imageHeight="70vh" + thumbnailHeight={50} + thumbnailWidth={50} + setImageIndex={setSIndex} + imageIndex={sIndex} + /> +
+ ); +}; + +export default GallerySection; \ No newline at end of file diff --git a/static/photo-gallery/gallery-metadata.json b/static/photo-gallery/gallery-metadata.json index 483eecd..64afc63 100644 --- a/static/photo-gallery/gallery-metadata.json +++ b/static/photo-gallery/gallery-metadata.json @@ -1,55 +1,67 @@ { "photoGalleryMF": [ { - "thumbnail": "/photo-gallery/thumbnails/Amanzi_DFN_fig1a.png", - "photo": "/photo-gallery/Amanzi_DFN_fig1a.png", - "caption": "Amanzi DFN Figure 1(a)" - }, - { - "thumbnail": "/photo-gallery/thumbnails/Amanzi_DFN_fig2a.png", - "photo": "/photo-gallery/Amanzi_DFN_fig2a.png", - "caption": "Amanzi DFN Figure 2(a)" - } + "id": 1, + "image": "/photo-gallery/Amanzi_DFN_fig1a.png", + "title": "Amanzi DFN Figure 1(a)", + "thumbnail": "/photo-gallery/thumbnails/Amanzi_DFN_fig1a.png" + }, + { + "id": 2, + "image": "/photo-gallery/Amanzi_DFN_fig2a.png", + "title": "Amanzi DFN Figure 2(a)", + "thumbnail": "static/photo-gallery/thumbnails/Amanzi_DFN_fig2a.png" + } ], + "photoGalleryRTM": [ { - "thumbnail": "/photo-gallery/thumbnails/farea-composite-2006.png", - "photo": "/photo-gallery/farea-composite-2006.png", - "caption": "F-Area Composite 2006" - }, + "id": 1, + "image": "/photo-gallery/farea-composite-2006.png", + "title": "F-Area Composite 2006", + "thumbnail": "/photo-gallery/thumbnails/farea-composite-2006.png" + }, { - "thumbnail": "/photo-gallery/thumbnails/farea-composite-2026.png", - "photo": "/photo-gallery/farea-composite-2026.png", - "caption": "F-Area Composite 2026" + "id": 2, + "image": "/photo-gallery/farea-composite-2026.png", + "title": "F-Area Composite 2026", + "thumbnail": "/photo-gallery/thumbnails/farea-composite-2026.png" }, { + "id": 3, "thumbnail": "/photo-gallery/thumbnails/nnss-2030-blk.png", - "photo": "/photo-gallery/nnss-2030-blk.png", - "caption": "NNSS 2030" + "image": "/photo-gallery/nnss-2030-blk.png", + "title": "NNSS 2030" }, { + "id": 4, "thumbnail": "/photo-gallery/thumbnails/nnss-2030-composite-blk.png", - "photo": "/photo-gallery/nnss-2030-composite-blk.png", - "caption": "NNSS 2030 Composite" + "image": "/photo-gallery/nnss-2030-composite-blk.png", + "title": "NNSS 2030 Composite" } ], + "photoGalleryArctic": [ { + "id": 1, "thumbnail": "/photo-gallery/thumbnails/barrow-movie-speed-0122-8k.png", - "photo": "/photo-gallery/barrow-movie-speed-0122-8k.png", - "caption": "Barrow 01" + "image": "/photo-gallery/barrow-movie-speed-0122-8k.png", + "title": "Barrow 01" }, { + "id": 2, "thumbnail": "/photo-gallery/thumbnails/barrow-movie-water-0122-8k.png", - "photo": "/photo-gallery/barrow-movie-water-0122-8k.png", - "caption": "Barrow 02" + "image": "/photo-gallery/barrow-movie-water-0122-8k.png", + "title": "Barrow 02" } ], + "photoGalleryWatersheds": [ { + "id": 1, "thumbnail": "/photo-gallery/thumbnails/coweeta_steadystate_hires00001.png", - "photo": "/photo-gallery/coweeta_steadystate_hires00001.png", - "caption": "Coweeta Steady-State" + "image": "/photo-gallery/coweeta_steadystate_hires00001.png", + "title": "Coweeta Steady-State" } ] }