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; 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 ---- */ /* ---- Layout: slideshow (left) + thumbs (right), full width ---- */
.gallery-wrap { .gallery-wrap {
display: flex; display: flex;

8
index.html
View File

@@ -14,6 +14,7 @@
<script type="text/javascript" src="js/bestpic.js"></script> <script type="text/javascript" src="js/bestpic.js"></script>
<script type="text/javascript" src="js/image_manifest.js"></script> <script type="text/javascript" src="js/image_manifest.js"></script>
<script type="text/javascript" src="js/uploader.js"></script> <script type="text/javascript" src="js/uploader.js"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<!-- We only want the thunbnails to display when javascript is disabled --> <!-- We only want the thunbnails to display when javascript is disabled -->
<script type="text/javascript"> <script type="text/javascript">
@@ -74,6 +75,13 @@
</div> </div>
</div> </div>
<div id="footer">&copy; 2009 Trent Foley</div> <div id="footer">&copy; 2009 Trent Foley</div>
<div id="lightbox" class="lightbox" style="display:none;" aria-hidden="true">
<div class="lightbox-backdrop"></div>
<button id="lightbox-close" class="lightbox-close" type="button" aria-label="Close">×</button>
<div class="lightbox-content" role="dialog" aria-modal="true">
<img id="lightbox-img" alt="" />
</div>
</div>
<script type="text/javascript"> <script type="text/javascript">
// Build thumbs + init gallery after DOM is ready (and after bestpic.js runs). // Build thumbs + init gallery after DOM is ready (and after bestpic.js runs).
jQuery(function() { jQuery(function() {

51
js/lightbox.js Normal file
View File

@@ -0,0 +1,51 @@
// Fullscreen lightbox for the main slideshow image
(function ($) {
function openLightbox(src, alt) {
var $lb = $('#lightbox');
var $img = $('#lightbox-img');
if (!$lb.length || !$img.length) return;
$img.attr('src', src || '').attr('alt', alt || '');
$('body').css('overflow', 'hidden');
$lb.show().attr('aria-hidden', 'false');
}
function closeLightbox() {
var $lb = $('#lightbox');
var $img = $('#lightbox-img');
if (!$lb.length) return;
$lb.hide().attr('aria-hidden', 'true');
if ($img.length) $img.attr('src', '');
$('body').css('overflow', '');
}
$(function () {
// Clicking the big image opens the lightbox. Use delegation because slideshow content is rebuilt.
$('#slideshow').on('click', 'img', function (e) {
// Prevent galleriffic's advance-link click handler from firing
e.preventDefault();
e.stopPropagation();
var src = $(this).attr('src');
var alt = $(this).attr('alt') || '';
openLightbox(src, alt);
return false;
});
// Close controls
$(document).on('click', '#lightbox-close, #lightbox .lightbox-backdrop', function (e) {
e.preventDefault();
closeLightbox();
return false;
});
$(document).on('keydown', function (e) {
if (e.keyCode === 27) { // ESC
closeLightbox();
}
});
});
})(jQuery);