This repository has no description
fix lightbox
author
damedotblog
date
(Feb 24, 2025, 1:32 PM -0500)
commit
e8835dcb
e8835dcbd065172b259ae2e30633b397a1dd3958
parent
023d8944
023d8944bbd0223ca617fa999c46e490efbc1ca2
+59
-10
+35
-1
src/components/Shortcut/Shortcut.css
+35
-1
src/components/Shortcut/Shortcut.css
···
56
56
max-width: 90%;
57
57
max-height: 90%;
58
58
object-fit: contain;
59
-
}
59
+
}
60
+
61
+
/* src/components/Shortcut/Shortcut.css */
62
+
.lightbox-overlay {
63
+
position: fixed;
64
+
top: 0;
65
+
left: 0;
66
+
right: 0;
67
+
bottom: 0;
68
+
background-color: rgba(0, 0, 0, 0.8);
69
+
display: flex;
70
+
justify-content: center;
71
+
align-items: center;
72
+
z-index: 9999;
73
+
}
74
+
75
+
.lightbox-content {
76
+
position: relative;
77
+
}
78
+
79
+
.custom-image-gallery {
80
+
max-width: 90%;
81
+
max-height: 90%;
82
+
}
83
+
84
+
.close-button {
85
+
position: absolute;
86
+
top: 10px;
87
+
right: 10px;
88
+
color: #fff;
89
+
font-size: 24px;
90
+
background: none;
91
+
border: none;
92
+
cursor: pointer;
93
+
}
+24
-9
src/components/Shortcut/Shortcut.js
+24
-9
src/components/Shortcut/Shortcut.js
···
1
1
// src/components/Shortcut/Shortcut.jsx
2
-
import React, { useState } from 'react';
2
+
import React, { useState, useRef } from 'react';
3
3
import ImageGallery from 'react-image-gallery';
4
4
import 'react-image-gallery/styles/css/image-gallery.css';
5
5
import './Shortcut.css';
···
7
7
const Shortcut = () => {
8
8
const [isOpen, setIsOpen] = useState(false);
9
9
const [currentIndex, setCurrentIndex] = useState(0);
10
+
const galleryRef = useRef(null);
10
11
11
12
const images = [
12
13
{
···
27
28
const closeLightbox = () => {
28
29
setCurrentIndex(0);
29
30
setIsOpen(false);
31
+
};
32
+
33
+
const handleClickOutside = (event) => {
34
+
if (galleryRef.current && !galleryRef.current.contains(event.target)) {
35
+
closeLightbox();
36
+
}
30
37
};
31
38
32
39
return (
···
69
76
</main>
70
77
71
78
{isOpen && (
72
-
<ImageGallery
73
-
items={images}
74
-
startIndex={currentIndex}
75
-
onClose={closeLightbox}
76
-
showThumbnails={false}
77
-
showPlayButton={false}
78
-
showFullscreenButton={false}
79
-
/>
79
+
<div className="lightbox-overlay" onClick={handleClickOutside}>
80
+
<div className="lightbox-content" ref={galleryRef}>
81
+
<ImageGallery
82
+
items={images}
83
+
startIndex={currentIndex}
84
+
onClose={closeLightbox}
85
+
showThumbnails={false}
86
+
showPlayButton={false}
87
+
showFullscreenButton={false}
88
+
additionalClass="custom-image-gallery"
89
+
/>
90
+
<button className="close-button" onClick={closeLightbox}>
91
+
×
92
+
</button>
93
+
</div>
94
+
</div>
80
95
)}
81
96
</>
82
97
);