Skip to content

Commit 89d76d8

Browse files
warrenlrwarrenlr
committed
revert back to basic gallery display
1 parent 703e2a7 commit 89d76d8

2 files changed

Lines changed: 104 additions & 102 deletions

File tree

‎gallery.md‎

Lines changed: 6 additions & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -22,14 +22,16 @@ Photographs from the Birol Labs over the years, including lab gatherings, confer
2222

2323
.gallery {
2424
display: grid;
25-
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
26-
gap: 1rem;
25+
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
26+
gap: 1.5rem;
2727
}
2828

2929
.gallery figure img {
3030
width: 100%;
31-
height: 180px;
32-
object-fit: cover;
31+
height: auto;
32+
display: block;
33+
border: 1px solid #ddd;
34+
border-radius: 6px;
3335
}
3436

3537
.gallery figcaption {
@@ -39,52 +41,6 @@ Photographs from the Birol Labs over the years, including lab gatherings, confer
3941
color: #666;
4042
}
4143

42-
/* ---------- LIGHTBOX ---------- */
43-
44-
.lightbox {
45-
display: none;
46-
position: fixed;
47-
z-index: 9999;
48-
left: 0;
49-
top: 0;
50-
width: 100%;
51-
height: 100%;
52-
background: rgba(0,0,0,0.85);
53-
align-items: center;
54-
justify-content: center;
55-
flex-direction: column;
56-
padding: 2rem;
57-
}
58-
59-
.lightbox.open {
60-
display: flex;
61-
}
62-
63-
.lightbox-img {
64-
max-width: 90%;
65-
max-height: 80vh;
66-
border-radius: 6px;
67-
box-shadow: 0 10px 40px rgba(0,0,0,0.5);
68-
}
69-
70-
.lightbox-caption {
71-
margin-top: 1rem;
72-
color: #fff;
73-
font-size: 0.95rem;
74-
text-align: center;
75-
max-width: 80%;
76-
}
77-
78-
.lightbox-close {
79-
position: absolute;
80-
top: 20px;
81-
right: 30px;
82-
font-size: 2rem;
83-
color: #fff;
84-
cursor: pointer;
85-
user-select: none;
86-
}
87-
8844
</style>
8945

9046
<div class="gallery-section">
@@ -226,54 +182,3 @@ Photographs from the Birol Labs over the years, including lab gatherings, confer
226182

227183
</div>
228184

229-
<!-- Lightbox Overlay -->
230-
<div id="lightbox" class="lightbox" aria-hidden="true">
231-
<span class="lightbox-close" id="lightbox-close">&times;</span>
232-
<img id="lightbox-img" class="lightbox-img" src="" alt="">
233-
<div id="lightbox-caption" class="lightbox-caption"></div>
234-
</div>
235-
236-
<script>
237-
document.addEventListener("DOMContentLoaded", function () {
238-
const lightbox = document.getElementById("lightbox");
239-
const lightboxImg = document.getElementById("lightbox-img");
240-
const lightboxCaption = document.getElementById("lightbox-caption");
241-
const closeBtn = document.getElementById("lightbox-close");
242-
243-
// Attach click handlers to all gallery links
244-
document.querySelectorAll(".gallery a").forEach(link => {
245-
link.addEventListener("click", function (e) {
246-
e.preventDefault();
247-
248-
const img = this.querySelector("img");
249-
const href = this.getAttribute("href");
250-
251-
lightboxImg.src = href;
252-
lightboxImg.alt = img.alt || "";
253-
lightboxCaption.textContent =
254-
this.nextElementSibling?.textContent ||
255-
img.alt ||
256-
"";
257-
258-
lightbox.classList.add("open");
259-
lightbox.setAttribute("aria-hidden", "false");
260-
});
261-
});
262-
263-
function closeLightbox() {
264-
lightbox.classList.remove("open");
265-
lightbox.setAttribute("aria-hidden", "true");
266-
lightboxImg.src = "";
267-
}
268-
269-
closeBtn.addEventListener("click", closeLightbox);
270-
271-
lightbox.addEventListener("click", function (e) {
272-
if (e.target === lightbox) closeLightbox();
273-
});
274-
275-
document.addEventListener("keydown", function (e) {
276-
if (e.key === "Escape") closeLightbox();
277-
});
278-
});
279-
</script>

‎gallery.thumb-broken.md‎

Lines changed: 98 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ title: Gallery
44
permalink: /gallery/
55
---
66

7-
Photographs from the Bioinformatics Technologies Lab over the years, including lab gatherings, conferences, workshops, and other memorable moments.
7+
Photographs from the Birol Labs over the years, including lab gatherings, conferences, workshops, and other memorable moments.
88

99
<style>
1010

@@ -39,6 +39,52 @@ Photographs from the Bioinformatics Technologies Lab over the years, including l
3939
color: #666;
4040
}
4141

42+
/* ---------- LIGHTBOX ---------- */
43+
44+
.lightbox {
45+
display: none;
46+
position: fixed;
47+
z-index: 9999;
48+
left: 0;
49+
top: 0;
50+
width: 100%;
51+
height: 100%;
52+
background: rgba(0,0,0,0.85);
53+
align-items: center;
54+
justify-content: center;
55+
flex-direction: column;
56+
padding: 2rem;
57+
}
58+
59+
.lightbox.open {
60+
display: flex;
61+
}
62+
63+
.lightbox-img {
64+
max-width: 90%;
65+
max-height: 80vh;
66+
border-radius: 6px;
67+
box-shadow: 0 10px 40px rgba(0,0,0,0.5);
68+
}
69+
70+
.lightbox-caption {
71+
margin-top: 1rem;
72+
color: #fff;
73+
font-size: 0.95rem;
74+
text-align: center;
75+
max-width: 80%;
76+
}
77+
78+
.lightbox-close {
79+
position: absolute;
80+
top: 20px;
81+
right: 30px;
82+
font-size: 2rem;
83+
color: #fff;
84+
cursor: pointer;
85+
user-select: none;
86+
}
87+
4288
</style>
4389

4490
<div class="gallery-section">
@@ -180,3 +226,54 @@ Photographs from the Bioinformatics Technologies Lab over the years, including l
180226

181227
</div>
182228

229+
<!-- Lightbox Overlay -->
230+
<div id="lightbox" class="lightbox" aria-hidden="true">
231+
<span class="lightbox-close" id="lightbox-close">&times;</span>
232+
<img id="lightbox-img" class="lightbox-img" src="" alt="">
233+
<div id="lightbox-caption" class="lightbox-caption"></div>
234+
</div>
235+
236+
<script>
237+
document.addEventListener("DOMContentLoaded", function () {
238+
const lightbox = document.getElementById("lightbox");
239+
const lightboxImg = document.getElementById("lightbox-img");
240+
const lightboxCaption = document.getElementById("lightbox-caption");
241+
const closeBtn = document.getElementById("lightbox-close");
242+
243+
// Attach click handlers to all gallery links
244+
document.querySelectorAll(".gallery a").forEach(link => {
245+
link.addEventListener("click", function (e) {
246+
e.preventDefault();
247+
248+
const img = this.querySelector("img");
249+
const href = this.getAttribute("href");
250+
251+
lightboxImg.src = href;
252+
lightboxImg.alt = img.alt || "";
253+
lightboxCaption.textContent =
254+
this.nextElementSibling?.textContent ||
255+
img.alt ||
256+
"";
257+
258+
lightbox.classList.add("open");
259+
lightbox.setAttribute("aria-hidden", "false");
260+
});
261+
});
262+
263+
function closeLightbox() {
264+
lightbox.classList.remove("open");
265+
lightbox.setAttribute("aria-hidden", "true");
266+
lightboxImg.src = "";
267+
}
268+
269+
closeBtn.addEventListener("click", closeLightbox);
270+
271+
lightbox.addEventListener("click", function (e) {
272+
if (e.target === lightbox) closeLightbox();
273+
});
274+
275+
document.addEventListener("keydown", function (e) {
276+
if (e.key === "Escape") closeLightbox();
277+
});
278+
});
279+
</script>

0 commit comments

Comments
 (0)