Gallery
Moments captured throughout CARPOOL's history of serving the Bryan/College Station community.
0 photos
1 / 1
GalleryD0I7-T-A-M-U-D-U-M-M-Y2025-12-28T12:52:16-06:00
/* ====== CARPOOL Gallery - Clean Modern Design ====== */
.carpool-gallery {
--accent: #500000;
--accent-600: #6a0000;
--accent-400: #8c3a3a;
--text: #111827;
--text-light: #374151;
--muted: #6b7280;
--bg: #f8fafc;
--card: #ffffff;
--border: rgba(80,0,0,.08);
--radius: 14px;
--shadow-sm: 0 2px 8px rgba(80,0,0,.06);
--shadow-md: 0 4px 16px rgba(80,0,0,.10);
--shadow-lg: 0 12px 32px rgba(80,0,0,.16);
}
.carpool-gallery {
color: var(--text);
background: var(--bg);
font-family: Inter, system-ui, -apple-system, sans-serif;
}
.carpool-gallery .wrap {
max-width: 1600px;
margin: 0 auto;
padding: 48px 24px 0;
}
/* ---- Page Header ---- */
.carpool-gallery .page-head {
margin: 0 0 32px;
text-align: left;
}
.carpool-gallery .page-head h1 {
margin: 0;
font-weight: 900;
letter-spacing: .2px;
line-height: 1.2;
font-size: clamp(28px, 3.6vw, 42px);
}
.carpool-gallery .page-head h1::after {
content: "";
display: block;
width: 90px;
height: 3px;
margin: 12px 0 0;
background: linear-gradient(90deg, var(--accent), var(--accent-400));
border-radius: 999px;
}
.carpool-gallery .sub {
margin: 10px 0 0;
color: var(--muted);
font-size: clamp(15px, 1.8vw, 17px);
line-height: 1.6;
max-width: 600px;
}
/* ---- Image Count ---- */
.carpool-gallery .image-count {
display: inline-block;
background: var(--card);
border: 1px solid var(--border);
border-radius: 8px;
padding: 8px 14px;
font-size: 14px;
font-weight: 600;
color: var(--text-light);
margin-bottom: 24px;
box-shadow: var(--shadow-sm);
}
.carpool-gallery .image-count span {
color: var(--accent);
font-weight: 800;
}
/* ---- Gallery Grid ---- */
.carpool-gallery .grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 20px;
margin-bottom: 48px;
}
.carpool-gallery .grid-item {
position: relative;
aspect-ratio: 4/3;
border-radius: var(--radius);
overflow: hidden;
background: #e5e7eb;
cursor: pointer;
box-shadow: var(--shadow-sm);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.carpool-gallery .grid-item:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
}
.carpool-gallery .grid-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.carpool-gallery .grid-item:hover img {
transform: scale(1.05);
}
.carpool-gallery .grid-item::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(80,0,0,0.4) 0%, transparent 50%);
opacity: 0;
transition: opacity 0.25s ease;
pointer-events: none;
}
.carpool-gallery .grid-item:hover::after {
opacity: 1;
}
/* ---- Loading Skeleton ---- */
.carpool-gallery .grid-item.loading {
background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* ---- Lightbox ---- */
.carpool-gallery .lightbox {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.95);
z-index: 999999;
align-items: center;
justify-content: center;
padding: 20px;
}
.carpool-gallery .lightbox.active {
display: flex;
}
.carpool-gallery .lightbox-inner {
position: relative;
max-width: 90vw;
max-height: 85vh;
display: flex;
align-items: center;
justify-content: center;
}
.carpool-gallery .lightbox-img {
max-width: 100%;
max-height: 85vh;
border-radius: 8px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
object-fit: contain;
}
.carpool-gallery .lightbox-close {
position: fixed;
top: 20px;
right: 20px;
width: 48px;
height: 48px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 50%;
color: white;
font-size: 24px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
z-index: 10;
}
.carpool-gallery .lightbox-close:hover {
background: rgba(255, 255, 255, 0.2);
transform: scale(1.1);
}
.carpool-gallery .lightbox-nav {
position: fixed;
top: 50%;
transform: translateY(-50%);
width: 52px;
height: 52px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.15);
color: white;
font-size: 24px;
cursor: pointer;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
z-index: 10;
}
.carpool-gallery .lightbox-nav:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateY(-50%) scale(1.1);
}
.carpool-gallery .lightbox-prev {
left: 20px;
}
.carpool-gallery .lightbox-next {
right: 20px;
}
.carpool-gallery .lightbox-counter {
position: fixed;
bottom: 24px;
left: 50%;
transform: translateX(-50%);
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
padding: 10px 20px;
border-radius: 24px;
color: white;
font-size: 14px;
font-weight: 600;
z-index: 10;
}
/* Lightbox open body state */
body.lightbox-open {
overflow: hidden;
}
body.lightbox-open .fusion-header-wrapper,
body.lightbox-open .fusion-header,
body.lightbox-open .fusion-header-shadow {
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
/* ---- Mobile Optimizations ---- */
@media (max-width: 768px) {
.carpool-gallery .wrap {
padding: 32px 16px 56px;
}
.carpool-gallery .grid {
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 14px;
}
.carpool-gallery .lightbox-nav {
width: 44px;
height: 44px;
font-size: 20px;
}
.carpool-gallery .lightbox-prev {
left: 12px;
}
.carpool-gallery .lightbox-next {
right: 12px;
}
.carpool-gallery .lightbox-close {
top: 12px;
right: 12px;
width: 44px;
height: 44px;
}
}
@media (max-width: 480px) {
.carpool-gallery .grid {
grid-template-columns: 1fr;
gap: 12px;
}
.carpool-gallery .grid-item {
aspect-ratio: 16/10;
}
}
/* ---- Touch Device Optimizations ---- */
@media (hover: none) and (pointer: coarse) {
.carpool-gallery .grid-item:hover {
transform: none;
}
.carpool-gallery .grid-item:active {
transform: scale(0.98);
}
.carpool-gallery .lightbox-nav {
width: 56px;
height: 56px;
}
}
/* ---- Reduced Motion ---- */
@media (prefers-reduced-motion: reduce) {
.carpool-gallery *,
.carpool-gallery *::before,
.carpool-gallery *::after {
transition: none !important;
animation: none !important;
}
}
/* ===== GLOBAL CTA ===== */
.carpool-global-cta {
border-top: 1px solid #e5e7eb;
padding: 20px 24px 20px !important;
margin: 48px 0 0 !important;
margin-bottom: 0 !important;
text-align: center;
background: #f8fafc !important;
}
.carpool-global-cta p {
margin: 0 0 12px;
font-size: 0.9rem;
color: #6b7280;
font-weight: 500;
}
.carpool-global-cta nav {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 8px 20px;
padding-bottom: 0;
}
.carpool-global-cta a {
color: #500000;
text-decoration: none;
font-size: 0.875rem;
font-weight: 600;
transition: color 0.2s ease;
}
.carpool-global-cta a:hover {
color: #7c2d2d;
text-decoration: underline;
}
@media (max-width: 600px) {
.carpool-global-cta { padding: 16px 16px 16px !important; margin: 32px 0 0 !important; }
.carpool-global-cta nav { gap: 6px 16px; }
.carpool-global-cta a { font-size: 0.8rem; }
}
/* ===== WORDPRESS/AVADA CONTAINER OVERRIDES ===== */
html, body {
margin: 0 !important;
padding: 0 !important;
overflow-x: hidden !important;
background: #500000 !important;
}
*, *::before, *::after {
box-sizing: border-box !important;
}
#wrapper,
#main,
#content,
.fusion-footer,
.fusion-footer-widget-area,
.fusion-footer-copyright-area,
.avada-footer,
.fusion-fullwidth,
.fusion-builder-row,
.fusion-layout-column,
.fusion-column-wrapper,
.fusion-column-content,
.fusion-row,
.post-content,
.avada-page-wrapper,
article.post,
.fusion-content-tb,
.fusion-tb-footer,
main#main,
main.clearfix {
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-bottom: 0 !important;
margin-bottom: 0 !important;
max-width: 100% !important;
width: 100% !important;
}
#wrapper {
background: #500000 !important;
}
.fusion-body,
body.fusion-body {
background: #500000 !important;
}
.carpool-global-cta {
width: 100vw !important;
max-width: 100vw !important;
margin-left: calc(-50vw + 50%) !important;
margin-right: calc(-50vw + 50%) !important;
margin-bottom: 0 !important;
box-sizing: border-box !important;
position: relative !important;
left: 0 !important;
right: 0 !important;
}
.carpool-global-cta + *,
aside.carpool-global-cta + *,
.carpool-global-cta ~ .carpool-footer,
aside + footer.carpool-footer {
margin-top: 0 !important;
padding-top: 0 !important;
}
.carpool-footer {
margin-top: 0 !important;
width: 100vw !important;
max-width: 100vw !important;
margin-left: calc(-50vw + 50%) !important;
margin-right: calc(-50vw + 50%) !important;
box-sizing: border-box !important;
position: relative !important;
left: 0 !important;
right: 0 !important;
}
/* ===== GLOBAL FOOTER ===== */
.carpool-footer {
background: #500000 !important;
color: #fff !important;
padding: 40px 24px !important;
padding-bottom: max(40px, calc(env(safe-area-inset-bottom) + 24px)) !important;
text-align: center !important;
margin: 0 !important;
margin-top: 0 !important;
box-shadow: none !important;
}
.carpool-footer .mobile-break { display: none; }
.carpool-footer .footer-inner { max-width: 800px; margin: 0 auto; width: 100%; }
.carpool-footer .footer-title { margin: 0 0 10px; font-size: 1.05rem; font-weight: 600; letter-spacing: 0.02em; }
.carpool-footer .footer-title strong { font-weight: 800; }
.carpool-footer .footer-stats { margin: 0 0 18px; font-size: 0.92rem; opacity: 0.9; }
.carpool-footer .footer-actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; }
.carpool-footer .footer-btn {
color: #fff; text-decoration: none; padding: 14px 24px; min-height: 48px;
background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.18);
border-radius: 12px; font-weight: 600; font-size: 0.95rem;
transition: all 0.2s ease; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
-webkit-tap-highlight-color: transparent;
}
.carpool-footer .footer-btn:hover { background: rgba(255,255,255,0.2); transform: translateY(-2px); }
@media (hover: none) and (pointer: coarse) {
.carpool-footer .footer-btn:hover { transform: none; }
.carpool-footer .footer-btn:active { background: rgba(255,255,255,0.25); transform: scale(0.98); }
}
.carpool-footer .footer-sga {
border-top: 1px solid rgba(255,255,255,0.15); padding-top: 22px;
display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap;
}
.carpool-footer .footer-sga img { height: 48px; width: auto; max-width: 100%; filter: brightness(0) invert(1); opacity: 0.9; }
.carpool-footer .footer-sga p { margin: 0; font-size: 0.85rem; opacity: 0.9; max-width: 480px; line-height: 1.5; }
.carpool-footer .footer-sga a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 700px) {
.carpool-footer {
padding: 32px 16px;
padding-left: max(16px, env(safe-area-inset-left));
padding-right: max(16px, env(safe-area-inset-right));
padding-bottom: max(32px, calc(env(safe-area-inset-bottom) + 16px));
}
.carpool-footer .footer-inner { display: flex; flex-direction: column; gap: 16px; }
.carpool-footer .footer-title { font-size: 1rem; margin: 0; }
.carpool-footer .footer-stats { font-size: 0.9rem; margin: 0; }
.carpool-footer .footer-actions { flex-direction: column; gap: 10px; margin-bottom: 0; }
.carpool-footer .footer-btn { width: 100%; min-height: 52px; padding: 14px 20px; font-size: 1rem; }
.carpool-footer .footer-sga { flex-direction: column; gap: 12px; padding-top: 20px; text-align: center; }
.carpool-footer .footer-sga img { height: 40px; }
.carpool-footer .footer-sga p { text-align: center; padding: 0 8px; }
}
@media (max-width: 360px) {
.carpool-footer {
padding: 24px 12px;
padding-left: max(12px, env(safe-area-inset-left));
padding-right: max(12px, env(safe-area-inset-right));
}
.carpool-footer .footer-title { font-size: 0.95rem; }
.carpool-footer .footer-stats { font-size: 0.85rem; }
.carpool-footer .footer-btn { min-height: 48px; font-size: 0.95rem; padding: 12px 16px; }
.carpool-footer .footer-sga p { font-size: 0.8rem; }
}
![Gallery image]()
(function() {
'use strict';
// ====== IMAGE DATA ======
const images = [
"https://carpool.tamu.edu/wp-content/uploads/2023/09/carpool-18.jpg",
"https://carpool.tamu.edu/wp-content/uploads/2023/09/carpool-17.jpg",
"https://carpool.tamu.edu/wp-content/uploads/2023/09/carpool-14.jpg",
"https://carpool.tamu.edu/wp-content/uploads/2023/09/carpool-11.jpg",
"https://carpool.tamu.edu/wp-content/uploads/2023/09/carpool-9.jpg",
"https://carpool.tamu.edu/wp-content/uploads/2023/09/carpool-8.jpg",
"https://carpool.tamu.edu/wp-content/uploads/2023/09/carpool-13.jpg",
"https://carpool.tamu.edu/wp-content/uploads/2023/09/carpool-7.jpg",
"https://carpool.tamu.edu/wp-content/uploads/2023/09/carpool-6.jpg",
"https://carpool.tamu.edu/wp-content/uploads/2023/09/carpool-5.jpg",
"https://carpool.tamu.edu/wp-content/uploads/2023/09/carpool-4.jpg",
"https://carpool.tamu.edu/wp-content/uploads/2023/09/carpool-2.jpg",
"https://carpool.tamu.edu/wp-content/uploads/2023/09/carpool-1.jpg",
"https://carpool.tamu.edu/wp-content/uploads/2023/01/FirstOps2023.png",
"https://carpool.tamu.edu/wp-content/uploads/2023/01/FirstOps2023F.png",
"https://carpool.tamu.edu/wp-content/uploads/2022/12/TexasRoadhouse-scaled.jpg",
"https://carpool.tamu.edu/wp-content/uploads/2022/12/AwardsFall2022-scaled.jpg",
"https://carpool.tamu.edu/wp-content/uploads/2022/12/CarpoolNov19.jpg",
"https://carpool.tamu.edu/wp-content/uploads/2022/12/CarpoolNov18-e1674714221419.jpg",
"https://carpool.tamu.edu/wp-content/uploads/2022/11/IMG_8332-scaled.jpg",
"https://carpool.tamu.edu/wp-content/uploads/2022/11/IMG_9322.jpeg",
"https://carpool.tamu.edu/wp-content/uploads/2022/11/CarpoolOct22.jpg",
"https://carpool.tamu.edu/wp-content/uploads/2022/11/CarpoolHalloween.jpg",
"https://carpool.tamu.edu/wp-content/uploads/2022/11/Carpool5Nov.jpg",
"https://carpool.tamu.edu/wp-content/uploads/2022/11/WYATT.jpg",
"https://carpool.tamu.edu/wp-content/uploads/2021/10/242115441_433597971447056_5825105156148892108_n.jpg",
"https://carpool.tamu.edu/wp-content/uploads/2021/10/244075086_905994653679760_4175473701291191032_n.jpg",
"https://carpool.tamu.edu/wp-content/uploads/2021/10/243609718_450031173036678_5788664855431265157_n.jpg",
"https://carpool.tamu.edu/wp-content/uploads/2021/10/243711731_579322229938225_1114406679430999244_n.jpg",
"https://carpool.tamu.edu/wp-content/uploads/2018/10/IMG_0910.jpg",
"https://carpool.tamu.edu/wp-content/uploads/2018/10/IMG_20180130_122611.jpg",
"https://carpool.tamu.edu/wp-content/uploads/2018/10/IMG_0451.jpg",
"https://carpool.tamu.edu/wp-content/uploads/2018/10/DSC_0508.jpg",
"https://carpool.tamu.edu/wp-content/uploads/2018/10/42868616_10155854350922525_7146265731556966400_n.jpg",
"https://carpool.tamu.edu/wp-content/uploads/2018/10/MVIMG_20180324_221117.jpg",
"https://carpool.tamu.edu/wp-content/uploads/2018/10/IMG_7491.jpg",
"https://carpool.tamu.edu/wp-content/uploads/2018/10/IMG_4095.jpg",
"https://carpool.tamu.edu/wp-content/uploads/2018/10/42806428_10155854350917525_5728936694359523328_n.jpg",
"https://carpool.tamu.edu/wp-content/uploads/2018/10/DSC_0157.jpg",
"https://carpool.tamu.edu/wp-content/uploads/2018/10/CP-Soccer.jpg",
"https://carpool.tamu.edu/wp-content/uploads/2018/02/Copy-of-DSC00838.jpg",
"https://carpool.tamu.edu/wp-content/uploads/2018/01/youcaring-pic-6.jpg",
"https://carpool.tamu.edu/wp-content/uploads/2022/11/carpool20152.jpg",
"https://carpool.tamu.edu/wp-content/uploads/2022/11/carpool20132.jpg",
"https://carpool.tamu.edu/wp-content/uploads/2022/11/carpool2017.jpg",
"https://carpool.tamu.edu/wp-content/uploads/2022/11/Carpool2015.jpg",
"https://carpool.tamu.edu/wp-content/uploads/2022/11/Carpool2013.jpg",
"https://carpool.tamu.edu/wp-content/uploads/2022/11/Carpool2012.jpg",
"https://carpool.tamu.edu/wp-content/uploads/2022/11/Carpool2011ops.jpg",
"https://carpool.tamu.edu/wp-content/uploads/2022/11/Carpool2011MADD.jpg",
"https://carpool.tamu.edu/wp-content/uploads/2022/11/10645270_10152588119577525_7734777424895653199_n.jpg",
"https://carpool.tamu.edu/wp-content/uploads/2022/11/Driven2013d.jpg",
"https://carpool.tamu.edu/wp-content/uploads/2022/11/Driven2013.jpg",
"https://carpool.tamu.edu/wp-content/uploads/2022/11/Driven2012d.jpg",
"https://carpool.tamu.edu/wp-content/uploads/2018/01/youcaring-pic-5.jpg",
"https://carpool.tamu.edu/wp-content/uploads/2018/01/youcaring-pic-4.jpg",
"https://carpool.tamu.edu/wp-content/uploads/2018/01/youcaring-pic-2.jpg",
"https://carpool.tamu.edu/wp-content/uploads/2018/01/youcaring-pic-3.jpg",
"https://carpool.tamu.edu/wp-content/uploads/2018/01/youcaring-pic-1.jpg",
"https://carpool.tamu.edu/wp-content/uploads/2018/01/24955794_1154858831324772_5743073382205820181_o.jpg",
"https://carpool.tamu.edu/wp-content/uploads/2018/01/26173881_1666554330072131_6936993735143468569_o.jpg",
"https://carpool.tamu.edu/wp-content/uploads/2017/08/Untitled.jpg",
"https://carpool.tamu.edu/wp-content/uploads/2017/08/DJx2BLAUMAAbyYB.jpg",
"https://carpool.tamu.edu/wp-content/uploads/2017/08/carpool-birthday.jpg",
"https://carpool.tamu.edu/wp-content/uploads/2017/08/21761920_10155008950937525_5025889767885332356_n.jpg",
"https://carpool.tamu.edu/wp-content/uploads/2017/08/21616185_10155709263771944_5618501118790763332_n.jpg",
"https://carpool.tamu.edu/wp-content/uploads/2016/11/fish-camp.jpg",
"https://carpool.tamu.edu/wp-content/uploads/2017/09/carpool-image.jpg",
"https://carpool.tamu.edu/wp-content/uploads/2017/08/17629753_1258390960946212_7902836412280047796_n.jpg",
"https://carpool.tamu.edu/wp-content/uploads/2017/08/pic-for-website-7.jpg",
"https://carpool.tamu.edu/wp-content/uploads/2017/08/pic-for-website-8.jpg",
"https://carpool.tamu.edu/wp-content/uploads/2017/08/ccarpool-pic.jpg",
"https://carpool.tamu.edu/wp-content/uploads/2016/11/17190685_1612760412070737_6880432442707744504_n.jpg",
"https://carpool.tamu.edu/wp-content/uploads/2016/11/16507866_1421570837862253_8886343175990548320_n.jpg",
"https://carpool.tamu.edu/wp-content/uploads/2016/11/16473847_1769399716410640_3390018204617373768_n.jpg",
"https://carpool.tamu.edu/wp-content/uploads/2016/11/18194844_10209745016406743_3499309372629364197_n-1.jpg",
"https://carpool.tamu.edu/wp-content/uploads/2016/11/12933123_1472016546176112_6472897902528997557_n.jpg",
"https://carpool.tamu.edu/wp-content/uploads/2016/11/13103356_983548475547_1543734942227155992_n.jpg",
"https://carpool.tamu.edu/wp-content/uploads/2016/11/18057037_1421361611220011_5131412449075304108_n.jpg"
];
// ====== ELEMENTS ======
const grid = document.getElementById('gallery-grid');
const photoCount = document.getElementById('photo-count');
const lightbox = document.getElementById('lightbox');
const lightboxImg = document.getElementById('lightbox-img');
const lightboxClose = document.getElementById('lightbox-close');
const lightboxPrev = document.getElementById('lightbox-prev');
const lightboxNext = document.getElementById('lightbox-next');
const lightboxCounter = document.getElementById('lightbox-counter');
let currentIndex = 0;
// ====== BUILD GALLERY ======
function buildGallery() {
photoCount.textContent = images.length;
images.forEach((src, index) => {
const item = document.createElement('div');
item.className = 'grid-item loading';
item.setAttribute('role', 'button');
item.setAttribute('tabindex', '0');
item.setAttribute('aria-label', `View image ${index + 1}`);
const img = document.createElement('img');
img.src = src;
img.alt = `CARPOOL photo ${index + 1}`;
img.loading = 'lazy';
img.decoding = 'async';
img.onload = () => item.classList.remove('loading');
img.onerror = () => {
item.classList.remove('loading');
item.style.display = 'none';
};
item.addEventListener('click', () => openLightbox(index));
item.addEventListener('keydown', (e) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
openLightbox(index);
}
});
item.appendChild(img);
grid.appendChild(item);
});
}
// ====== LIGHTBOX ======
function openLightbox(index) {
currentIndex = index;
updateLightbox();
lightbox.classList.add('active');
document.body.classList.add('lightbox-open');
lightboxClose.focus();
}
function closeLightbox() {
lightbox.classList.remove('active');
document.body.classList.remove('lightbox-open');
}
function updateLightbox() {
lightboxImg.src = images[currentIndex];
lightboxImg.alt = `CARPOOL photo ${currentIndex + 1}`;
lightboxCounter.textContent = `${currentIndex + 1} / ${images.length}`;
}
function prevImage() {
currentIndex = (currentIndex - 1 + images.length) % images.length;
updateLightbox();
}
function nextImage() {
currentIndex = (currentIndex + 1) % images.length;
updateLightbox();
}
// ====== EVENT LISTENERS ======
lightboxClose.addEventListener('click', closeLightbox);
lightboxPrev.addEventListener('click', prevImage);
lightboxNext.addEventListener('click', nextImage);
lightbox.addEventListener('click', (e) => {
if (e.target === lightbox) closeLightbox();
});
document.addEventListener('keydown', (e) => {
if (!lightbox.classList.contains('active')) return;
switch (e.key) {
case 'Escape':
closeLightbox();
break;
case 'ArrowLeft':
prevImage();
break;
case 'ArrowRight':
nextImage();
break;
}
});
// Touch swipe support
let touchStartX = 0;
let touchEndX = 0;
lightbox.addEventListener('touchstart', (e) => {
touchStartX = e.changedTouches[0].screenX;
}, { passive: true });
lightbox.addEventListener('touchend', (e) => {
touchEndX = e.changedTouches[0].screenX;
handleSwipe();
}, { passive: true });
function handleSwipe() {
const diff = touchStartX - touchEndX;
const threshold = 50;
if (Math.abs(diff) > threshold) {
if (diff > 0) {
nextImage();
} else {
prevImage();
}
}
}
// ====== INIT ======
buildGallery();
})();