Spaces:
Running
Running
Andre
commited on
Commit
·
b92df99
1
Parent(s):
3cf54d2
Update
Browse files- index.php +2 -0
- index_old.php +79 -2
index.php
CHANGED
|
@@ -12,6 +12,8 @@ function getImages($directory) {
|
|
| 12 |
$files[] = $file;
|
| 13 |
}
|
| 14 |
}
|
|
|
|
|
|
|
| 15 |
}
|
| 16 |
return $files;
|
| 17 |
}
|
|
|
|
| 12 |
$files[] = $file;
|
| 13 |
}
|
| 14 |
}
|
| 15 |
+
// Sort files in reverse order
|
| 16 |
+
rsort($files);
|
| 17 |
}
|
| 18 |
return $files;
|
| 19 |
}
|
index_old.php
CHANGED
|
@@ -57,6 +57,7 @@ function getImages($directory) {
|
|
| 57 |
background-color: #2d2d2d;
|
| 58 |
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
|
| 59 |
transition: transform 0.3s ease;
|
|
|
|
| 60 |
}
|
| 61 |
|
| 62 |
.gallery-item:hover {
|
|
@@ -78,6 +79,46 @@ function getImages($directory) {
|
|
| 78 |
text-align: center;
|
| 79 |
}
|
| 80 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 81 |
@media (max-width: 768px) {
|
| 82 |
.gallery {
|
| 83 |
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
|
@@ -87,7 +128,7 @@ function getImages($directory) {
|
|
| 87 |
</head>
|
| 88 |
<body>
|
| 89 |
<div class="gallery-container">
|
| 90 |
-
|
| 91 |
<div class="gallery">
|
| 92 |
<?php
|
| 93 |
// Specify your images directory
|
|
@@ -95,7 +136,7 @@ function getImages($directory) {
|
|
| 95 |
$images = getImages($imageDirectory);
|
| 96 |
|
| 97 |
foreach ($images as $image) {
|
| 98 |
-
echo '<div class="gallery-item">';
|
| 99 |
echo '<img src="' . $imageDirectory . $image . '" alt="' . pathinfo($image, PATHINFO_FILENAME) . '">';
|
| 100 |
echo '<div class="image-caption">' . pathinfo($image, PATHINFO_FILENAME) . '</div>';
|
| 101 |
echo '</div>';
|
|
@@ -107,5 +148,41 @@ function getImages($directory) {
|
|
| 107 |
?>
|
| 108 |
</div>
|
| 109 |
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 110 |
</body>
|
| 111 |
</html>
|
|
|
|
| 57 |
background-color: #2d2d2d;
|
| 58 |
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
|
| 59 |
transition: transform 0.3s ease;
|
| 60 |
+
cursor: pointer;
|
| 61 |
}
|
| 62 |
|
| 63 |
.gallery-item:hover {
|
|
|
|
| 79 |
text-align: center;
|
| 80 |
}
|
| 81 |
|
| 82 |
+
/* Lightbox styles */
|
| 83 |
+
.lightbox {
|
| 84 |
+
display: none;
|
| 85 |
+
position: fixed;
|
| 86 |
+
top: 0;
|
| 87 |
+
left: 0;
|
| 88 |
+
width: 100%;
|
| 89 |
+
height: 100%;
|
| 90 |
+
background-color: rgba(0, 0, 0, 0.9);
|
| 91 |
+
z-index: 1000;
|
| 92 |
+
justify-content: center;
|
| 93 |
+
align-items: center;
|
| 94 |
+
cursor: pointer;
|
| 95 |
+
}
|
| 96 |
+
|
| 97 |
+
.lightbox.active {
|
| 98 |
+
display: flex;
|
| 99 |
+
}
|
| 100 |
+
|
| 101 |
+
.lightbox img {
|
| 102 |
+
max-width: 90%;
|
| 103 |
+
max-height: 90vh;
|
| 104 |
+
object-fit: contain;
|
| 105 |
+
border: 2px solid #ffffff;
|
| 106 |
+
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
|
| 107 |
+
}
|
| 108 |
+
|
| 109 |
+
.close-button {
|
| 110 |
+
position: fixed;
|
| 111 |
+
top: 20px;
|
| 112 |
+
right: 20px;
|
| 113 |
+
color: #ffffff;
|
| 114 |
+
font-size: 30px;
|
| 115 |
+
cursor: pointer;
|
| 116 |
+
background: none;
|
| 117 |
+
border: none;
|
| 118 |
+
padding: 10px;
|
| 119 |
+
z-index: 1001;
|
| 120 |
+
}
|
| 121 |
+
|
| 122 |
@media (max-width: 768px) {
|
| 123 |
.gallery {
|
| 124 |
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
|
|
|
| 128 |
</head>
|
| 129 |
<body>
|
| 130 |
<div class="gallery-container">
|
| 131 |
+
<h1>========== LS-AI-img-gen - Image Gallery ==========</h1>
|
| 132 |
<div class="gallery">
|
| 133 |
<?php
|
| 134 |
// Specify your images directory
|
|
|
|
| 136 |
$images = getImages($imageDirectory);
|
| 137 |
|
| 138 |
foreach ($images as $image) {
|
| 139 |
+
echo '<div class="gallery-item" onclick="openLightbox(\'' . $imageDirectory . $image . '\')">';
|
| 140 |
echo '<img src="' . $imageDirectory . $image . '" alt="' . pathinfo($image, PATHINFO_FILENAME) . '">';
|
| 141 |
echo '<div class="image-caption">' . pathinfo($image, PATHINFO_FILENAME) . '</div>';
|
| 142 |
echo '</div>';
|
|
|
|
| 148 |
?>
|
| 149 |
</div>
|
| 150 |
</div>
|
| 151 |
+
|
| 152 |
+
<!-- Lightbox container -->
|
| 153 |
+
<div class="lightbox" id="lightbox" onclick="closeLightbox()">
|
| 154 |
+
<button class="close-button" onclick="closeLightbox()">×</button>
|
| 155 |
+
<img id="lightbox-img" src="" alt="Lightbox image">
|
| 156 |
+
</div>
|
| 157 |
+
|
| 158 |
+
<script>
|
| 159 |
+
function openLightbox(imageSrc) {
|
| 160 |
+
const lightbox = document.getElementById('lightbox');
|
| 161 |
+
const lightboxImg = document.getElementById('lightbox-img');
|
| 162 |
+
lightboxImg.src = imageSrc;
|
| 163 |
+
lightbox.classList.add('active');
|
| 164 |
+
// Prevent scrolling when lightbox is open
|
| 165 |
+
document.body.style.overflow = 'hidden';
|
| 166 |
+
}
|
| 167 |
+
|
| 168 |
+
function closeLightbox() {
|
| 169 |
+
const lightbox = document.getElementById('lightbox');
|
| 170 |
+
lightbox.classList.remove('active');
|
| 171 |
+
// Restore scrolling
|
| 172 |
+
document.body.style.overflow = 'auto';
|
| 173 |
+
}
|
| 174 |
+
|
| 175 |
+
// Close lightbox with Escape key
|
| 176 |
+
document.addEventListener('keydown', function(event) {
|
| 177 |
+
if (event.key === 'Escape') {
|
| 178 |
+
closeLightbox();
|
| 179 |
+
}
|
| 180 |
+
});
|
| 181 |
+
|
| 182 |
+
// Prevent lightbox from closing when clicking on the image
|
| 183 |
+
document.getElementById('lightbox-img').addEventListener('click', function(event) {
|
| 184 |
+
event.stopPropagation();
|
| 185 |
+
});
|
| 186 |
+
</script>
|
| 187 |
</body>
|
| 188 |
</html>
|