Add lightbox modal for full-size image inspection
UX Improvements: - Click main image to view full-size in lightbox modal - Dark overlay backdrop (95% opacity black) - Smooth zoom-in animation - Click outside or close button (×) to close - ESC key closes lightbox - Hover effect on main image (subtle scale) - Prevents background scrolling when open Modal Features: - Full-screen overlay (95% viewport) - Rounded corners and shadow on image - Animated close button (turns gold on hover) - Click-to-close on background - Responsive sizing (max 95% width/height) Perfect for inspecting generated images in detail! 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 (1M context) <noreply@anthropic.com>
This commit is contained in:
DJP
parent
c5c28da8af
commit
7f2dd95e73
1 changed files with 129 additions and 0 deletions
129
index.php
129
index.php
|
|
@ -682,6 +682,86 @@ $imageHistory = $sessionManager->getImageHistory();
|
|||
padding: 30px;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* Lightbox Modal */
|
||||
.lightbox-modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index: 9999;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.95);
|
||||
animation: fadeIn 0.3s;
|
||||
}
|
||||
|
||||
.lightbox-modal.show {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.lightbox-content {
|
||||
position: relative;
|
||||
max-width: 95%;
|
||||
max-height: 95%;
|
||||
animation: zoomIn 0.3s;
|
||||
}
|
||||
|
||||
.lightbox-content img {
|
||||
max-width: 100%;
|
||||
max-height: 95vh;
|
||||
display: block;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 10px 50px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.lightbox-close {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 30px;
|
||||
color: #fff;
|
||||
font-size: 40px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
z-index: 10000;
|
||||
transition: all 0.3s;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.lightbox-close:hover {
|
||||
background: #FFC407;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
@keyframes zoomIn {
|
||||
from {
|
||||
transform: scale(0.8);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Make main image clickable */
|
||||
#currentImage {
|
||||
cursor: pointer;
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
#currentImage:hover {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -1020,6 +1100,14 @@ Session Directory: <?php echo basename($sessionManager->getSessionDir()); ?></pr
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Lightbox Modal -->
|
||||
<div id="lightboxModal" class="lightbox-modal" onclick="closeLightbox(event)">
|
||||
<span class="lightbox-close" onclick="closeLightbox(event)">×</span>
|
||||
<div class="lightbox-content">
|
||||
<img id="lightboxImage" src="" alt="Full size image">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const form = document.getElementById('imageForm');
|
||||
const generateBtn = document.getElementById('generateBtn');
|
||||
|
|
@ -1153,6 +1241,47 @@ Session Directory: <?php echo basename($sessionManager->getSessionDir()); ?></pr
|
|||
link.click();
|
||||
}
|
||||
|
||||
// Lightbox functionality
|
||||
function openLightbox(imageSrc) {
|
||||
const modal = document.getElementById('lightboxModal');
|
||||
const lightboxImg = document.getElementById('lightboxImage');
|
||||
lightboxImg.src = imageSrc;
|
||||
modal.classList.add('show');
|
||||
document.body.style.overflow = 'hidden'; // Prevent scrolling
|
||||
}
|
||||
|
||||
function closeLightbox(event) {
|
||||
// Close if clicking on the modal background or close button
|
||||
if (event.target.id === 'lightboxModal' || event.target.className === 'lightbox-close') {
|
||||
const modal = document.getElementById('lightboxModal');
|
||||
modal.classList.remove('show');
|
||||
document.body.style.overflow = 'auto'; // Restore scrolling
|
||||
}
|
||||
}
|
||||
|
||||
// Add click event to main image
|
||||
<?php if ($currentImage): ?>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const currentImg = document.getElementById('currentImage');
|
||||
if (currentImg) {
|
||||
currentImg.addEventListener('click', function() {
|
||||
openLightbox(this.src);
|
||||
});
|
||||
}
|
||||
});
|
||||
<?php endif; ?>
|
||||
|
||||
// Close lightbox with Escape key
|
||||
document.addEventListener('keydown', function(event) {
|
||||
if (event.key === 'Escape') {
|
||||
const modal = document.getElementById('lightboxModal');
|
||||
if (modal.classList.contains('show')) {
|
||||
modal.classList.remove('show');
|
||||
document.body.style.overflow = 'auto';
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
function showError(message) {
|
||||
errorMessage.textContent = message;
|
||||
errorMessage.classList.add('show');
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue