ncue/dreamgirl
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add fullscreen lightbox on slideshow image click

Browse Source
This commit is contained in:
dsyoon
2025-12-28 00:10:04 +09:00
parent b2ffd1b2dc
commit a8f30018e8
3 changed files with 106 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
css/galleriffic-2.css
View File

@@ -186,6 +186,53 @@ div.navigation {
color: #666;
}
/* Fullscreen lightbox */
.lightbox {
position: fixed;
inset: 0;
z-index: 99999;
}
.lightbox-backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.85);
}
.lightbox-content {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
box-sizing: border-box;
}
.lightbox-content img {
max-width: 95vw;
max-height: 95vh;
width: auto;
height: auto;
border: 1px solid rgba(255, 255, 255, 0.2);
background: #000;
}
.lightbox-close {
position: absolute;
top: 14px;
right: 14px;
width: 44px;
height: 44px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.25);
background: rgba(0, 0, 0, 0.35);
color: #fff;
font-size: 28px;
line-height: 42px;
text-align: center;
cursor: pointer;
}
.lightbox-close:hover {
background: rgba(0, 0, 0, 0.55);
}
/* ---- Layout: slideshow (left) + thumbs (right), full width ---- */
.gallery-wrap {
display: flex;