|
Server : LiteSpeed System : Linux terra.hostitbro.com 5.14.0-611.54.3.el9_7.x86_64 #1 SMP PREEMPT_DYNAMIC Thu May 7 16:31:24 EDT 2026 x86_64 User : outerorb ( 1091) PHP Version : 8.1.34 Disable Function : mail Directory : /home2/outerorb/public_html/ | |
|
Path: /home2/outerorb/public_html/gallery.php
Size: 30.58 KB
Permissions: 0666
<?php
include 'inc/config.php';
$page_title = "Gallery - $company_name";
$page_description = "$company_name – Explore our photo gallery showcasing our work, events, and team.";
include 'inc/head.php';
// Dynamically build gallery categories based on assets/images/gallery folder structure.
$galleryBaseRelative = 'assets/images/gallery';
$galleryBaseAbsolute = __DIR__ . '/assets/images/gallery';
function scanGalleryFiles($absoluteDir, $relativeDir) {
$imageExt = ['jpg','jpeg','png','webp','gif','svg'];
$videoExt = ['mp4','mov','webm','ogg'];
$items = [];
if (!is_dir($absoluteDir)) {
return $items;
}
$dirIterator = new DirectoryIterator($absoluteDir);
foreach ($dirIterator as $fileinfo) {
if ($fileinfo->isDot() || !$fileinfo->isFile()) continue;
$ext = strtolower($fileinfo->getExtension());
$fileName = $fileinfo->getBasename();
$baseName = pathinfo($fileName, PATHINFO_FILENAME);
// Skip known problematic video files.
if (in_array(strtoupper($baseName), ['IMG 5173', 'IMG 5174', 'IMG 5175', 'IMG 5176', 'IMG 5177', 'IMG 5178', 'IMG 5179', 'IMG 5180', 'IMG 5181', 'IMG 5182', 'IMG 5183', 'IMG 5184', 'IMG 5185'], true) && in_array($ext, $videoExt, true)) {
continue;
}
if (in_array($ext, $imageExt, true)) {
$items[] = [
'name' => $fileName,
'webPath' => $relativeDir . '/' . $fileName,
'type' => 'image',
'ext' => $ext,
];
} elseif (in_array($ext, $videoExt, true)) {
$thumbPath = null;
foreach ($imageExt as $thumbExt) {
$candidate = $absoluteDir . '/' . $baseName . '.' . $thumbExt;
if (is_file($candidate)) {
$thumbPath = $relativeDir . '/' . $baseName . '.' . $thumbExt;
break;
}
}
$items[] = [
'name' => $fileName,
'webPath' => $relativeDir . '/' . $fileName,
'type' => 'video',
'ext' => $ext,
'thumbPath' => $thumbPath,
];
}
}
usort($items, function ($a, $b) {
return strcmp($a['name'], $b['name']);
});
return $items;
}
function sanitizeCategoryId($name) {
return strtolower(preg_replace('/[^a-z0-9]+/', '-', trim($name)));
}
$galleryCategories = [];
if (is_dir($galleryBaseAbsolute)) {
$categoryDirs = glob($galleryBaseAbsolute . '/*', GLOB_ONLYDIR) ?: [];
natsort($categoryDirs);
foreach ($categoryDirs as $catDir) {
$categoryKey = basename($catDir);
$categoryLabel = ucwords(str_replace(['-', '_'], [' ', ' '], $categoryKey));
$groups = [];
// Direct files inside category.
$directItems = scanGalleryFiles($catDir, $galleryBaseRelative . '/' . $categoryKey);
if (!empty($directItems)) {
$groups[''] = $directItems;
}
// Nested subfolders.
$subDirs = glob($catDir . '/*', GLOB_ONLYDIR) ?: [];
natsort($subDirs);
foreach ($subDirs as $subDir) {
$subKey = basename($subDir);
$subItems = scanGalleryFiles($subDir, $galleryBaseRelative . '/' . $categoryKey . '/' . $subKey);
if (!empty($subItems)) {
$groups[$subKey] = $subItems;
}
}
if (!empty($groups)) {
$galleryCategories[$categoryLabel] = [
'id' => sanitizeCategoryId($categoryKey),
'groups' => $groups,
];
}
}
}
?>
<style>
/* ===== Gallery Category Tabs ===== */
.gallery-tabs-wrapper { margin-bottom: 40px; }
.gallery-tabs {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
list-style: none;
padding: 0;
margin: 0 0 35px 0;
border: none;
}
.gallery-tab-btn {
border: 2px solid #e2e8f0;
background: #fff;
color: #073367;
font-weight: 600;
font-size: 14px;
padding: 11px 22px;
border-radius: 8px;
cursor: pointer;
transition: all 0.25s ease;
display: inline-flex;
align-items: center;
gap: 8px;
}
.gallery-tab-btn:hover {
border-color: #073367;
background: #f0f4fa;
transform: translateY(-2px);
}
.gallery-tab-btn.active {
background: #073367;
color: #fff;
border-color: #073367;
box-shadow: 0 4px 14px rgba(7,51,103,0.22);
}
/* ===== Gallery Card ===== */
.gallery-card {
border-radius: 12px;
overflow: hidden;
background: #fff;
box-shadow: 0 2px 10px rgba(0,0,0,0.08);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.gallery-card:hover {
transform: translateY(-7px);
box-shadow: 0 12px 30px rgba(0,0,0,0.14);
}
/* ===== Thumbnail & Image ===== */
.gallery-card .thumbnail {
position: relative;
height: 220px;
overflow: hidden;
background: #e8ecf0;
border-radius: 12px 12px 0 0;
}
.gallery-skeleton {
position: absolute;
inset: 0;
background: linear-gradient(90deg, #ececec 25%, #d4d4d4 50%, #ececec 75%);
background-size: 200% 100%;
animation: galleryShimmer 1.6s ease-in-out infinite;
z-index: 2;
transition: opacity 0.3s ease;
}
@keyframes galleryShimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.gallery-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
opacity: 0;
transition: opacity 0.4s ease, transform 0.5s ease;
}
.gallery-img.loaded { opacity: 1; }
.gallery-card:hover .gallery-img { transform: scale(1.06); }
/* ===== Hover Overlay ===== */
.gallery-card .thumbnail .overlay {
position: absolute;
inset: 0;
background: rgba(7,51,103,0.82);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s ease;
z-index: 3;
backdrop-filter: blur(2px);
}
.gallery-card:hover .overlay { opacity: 1; }
.gallery-link {
width: 56px;
height: 56px;
border-radius: 50%;
background: rgba(255,255,255,0.12);
border: 2px solid rgba(255,255,255,0.4);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 22px;
text-decoration: none;
transition: transform 0.3s ease, background 0.3s ease;
}
.gallery-link:hover {
transform: scale(1.12);
background: rgba(255,255,255,0.25);
}
/* ===== Card Content ===== */
.gallery-card .content { padding: 18px; }
.gallery-card .content h5 {
margin: 0 0 5px;
font-size: 15px;
font-weight: 600;
color: #073367;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.gallery-card .content p {
margin: 0;
font-size: 12px;
color: #6c757d;
}
/* ===== Subcategory Pills ===== */
.subcat-pills {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
list-style: none;
padding: 0;
margin: 0 0 25px 0;
}
.group-pill-btn {
padding: 7px 18px;
border: 2px solid #e2e8f0;
background: #fff;
color: #073367;
font-weight: 500;
font-size: 13px;
border-radius: 8px;
cursor: pointer;
transition: all 0.25s ease;
}
.group-pill-btn:hover { border-color: #073367; background: #f0f4fa; }
.group-pill-btn.active {
background: #073367;
color: #fff;
border-color: #073367;
box-shadow: 0 2px 8px rgba(7,51,103,0.2);
}
/* ===== Gallery Group heading ===== */
.gallery-group-heading {
color: #073367;
font-weight: 600;
margin-bottom: 16px;
}
/* ===== Lightbox ===== */
.gallery-lightbox button { transition: all 0.25s ease; }
/* ===== Pagination ===== */
.gallery-pagination {
display: flex;
gap: 12px;
justify-content: center;
align-items: center;
margin-top: 40px;
padding-top: 30px;
border-top: 1px solid #e9ecef;
/* keep pagination on a single row on larger screens */
flex-wrap: nowrap;
max-width: 920px;
margin-left: auto;
margin-right: auto;
}
.gallery-pagination .gallery-page-btn {
/* ensure buttons do not expand to full width */
flex: 0 0 auto;
width: auto;
min-width: 44px;
height: 44px;
padding: 0 12px;
border-radius: 6px;
border: 1.5px solid #d0d0d0;
background: #fff;
color: #333;
font-weight: 600;
font-size: 15px;
cursor: pointer;
transition: all 0.24s ease;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.gallery-pagination .gallery-page-btn:hover {
border-color: #073367;
color: #073367;
background: #f8fafc;
box-shadow: 0 2px 6px rgba(7,51,103,0.12);
transform: translateY(-1px);
}
.gallery-pagination .gallery-page-btn.active {
background: #073367;
color: #fff;
border-color: #073367;
box-shadow: 0 4px 12px rgba(7,51,103,0.20);
}
.gallery-pagination .gallery-page-btn.nav-btn {
min-width: auto;
padding: 0 16px;
font-size: 14px;
font-weight: 600;
letter-spacing: 0.3px;
}
.gallery-page-info {
color: #888;
font-size: 13px;
margin: 0 8px;
letter-spacing: 0.4px;
white-space: nowrap;
}
/* Mobile: stack into full-width bars for small screens */
@media (max-width: 768px) {
.gallery-tabs { gap: 8px; }
.gallery-tab-btn { padding: 8px 14px; font-size: 13px; }
.gallery-card .thumbnail { height: 180px; }
.gallery-pagination { gap: 8px; margin-top: 20px; padding-top: 16px; flex-wrap: wrap; justify-content: center; }
.gallery-pagination .gallery-page-btn { min-width: auto; width: 100%; height: 44px; font-size: 14px; }
.gallery-page-info { font-size: 13px; margin: 6px 0; width: 100%; text-align: center; }
}
</style>
<body>
<?php include 'inc/header.php'; ?>
<?php include 'inc/svc-bfsi-styles.php'; ?>
<section class="bfsi-hero">
<div class="container" style="position:relative;z-index:2;">
<div class="row justify-content-center">
<div class="col-xl-9 col-lg-11 text-center">
<div class="bfsi-hero-eyebrow"><i class="fa-solid fa-images"></i> Our Visual Story</div>
<h1>Gallery</h1>
<p class="hero-disc mx-auto">Events, team moments, office life and project highlights — a window into the Outer Orbit Technologies culture and community.</p>
<div class="bfsi-hero-chips justify-content-center">
<span><i class="fa-solid fa-camera"></i> Photos & Videos</span>
<span><i class="fa-solid fa-building"></i> Office Life</span>
<span><i class="fa-solid fa-calendar-check"></i> Events</span>
<span><i class="fa-solid fa-users"></i> Team Moments</span>
</div>
</div>
</div>
</div>
</section>
<div class="container">
<div class="bfsi-stat-strip">
<div class="bfsi-stat-strip-inner">
<div class="bfsi-stat"><div class="num">200<span>+</span></div><div class="label">Team members</div></div>
<div class="bfsi-stat"><div class="num">6</div><div class="label">Office locations</div></div>
<div class="bfsi-stat"><div class="num">10<span>+</span></div><div class="label">Years of culture</div></div>
<div class="bfsi-stat"><div class="num">100<span>%</span></div><div class="label">Practitioner-led</div></div>
</div>
</div>
</div>
<!-- Resource Library Section -->
<div id="resource-library" class="rts-resource-library" style="padding-top: 40px; padding-bottom: 60px;">
<div class="container">
<!-- Gallery Category Tab Buttons -->
<div class="gallery-tabs-wrapper">
<?php if (!empty($galleryCategories)): ?>
<ul class="gallery-tabs" id="galleryTabs">
<?php $first = true; foreach ($galleryCategories as $label => $category): ?>
<li>
<button class="gallery-tab-btn <?= $first ? 'active' : '' ?>"
data-pane-id="<?= $category['id'] ?>">
<i class="fa-solid fa-photo-film"></i>
<?= htmlspecialchars($label) ?>
</button>
</li>
<?php $first = false; endforeach; ?>
</ul>
<!-- Gallery Panes -->
<?php $firstPane = true; foreach ($galleryCategories as $label => $category): ?>
<div class="gallery-pane" id="<?= $category['id'] ?>"<?= $firstPane ? '' : ' style="display:none"' ?>>
<?php if (count($category['groups']) > 1): ?>
<ul class="subcat-pills">
<?php $gi = 0; foreach ($category['groups'] as $groupName => $items): ?>
<li>
<button class="group-pill-btn <?= $gi === 0 ? 'active' : '' ?>"
data-group="<?= htmlspecialchars($groupName) ?>">
<?= htmlspecialchars($groupName === '' ? 'All' : ucwords(str_replace(['-','_'], ' ', $groupName))) ?>
</button>
</li>
<?php $gi++; endforeach; ?>
</ul>
<?php endif; ?>
<?php $gi = 0; foreach ($category['groups'] as $groupName => $items): ?>
<div class="gallery-group" data-group="<?= htmlspecialchars($groupName) ?>"<?= $gi > 0 ? ' style="display:none"' : '' ?>>
<?php if (!empty($groupName)): ?>
<h4 class="gallery-group-heading"><?= htmlspecialchars(ucwords(str_replace(['-','_'], ' ', $groupName))) ?></h4>
<?php endif; ?>
<div class="row g-4">
<?php foreach ($items as $index => $item): ?>
<div class="col-lg-4 col-md-6 gallery-item"
data-index="<?= $index ?>"
data-source="<?= htmlspecialchars($item['webPath']) ?>"
data-type="<?= htmlspecialchars($item['type']) ?>">
<div class="gallery-card">
<div class="thumbnail">
<div class="gallery-skeleton"></div>
<?php if ($item['type'] === 'image'): ?>
<img data-src="<?= htmlspecialchars($item['webPath']) ?>"
alt="<?= htmlspecialchars(pathinfo($item['name'], PATHINFO_FILENAME)) ?>"
class="gallery-img" />
<?php elseif (!empty($item['thumbPath'])): ?>
<img data-src="<?= htmlspecialchars($item['thumbPath']) ?>"
alt="<?= htmlspecialchars(pathinfo($item['name'], PATHINFO_FILENAME)) ?>"
class="gallery-img" />
<?php else: ?>
<div class="gallery-skeleton" style="display:none;"></div>
<div style="position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(135deg,#1a1a2e,#16213e);z-index:3;">
<div style="width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,0.12);border:2px solid rgba(255,255,255,0.3);display:flex;align-items:center;justify-content:center;margin-bottom:10px;">
<i class="fa-solid fa-play" style="font-size:22px;color:#fff;margin-left:4px;"></i>
</div>
<span style="color:rgba(255,255,255,0.65);font-size:12px;font-weight:500;letter-spacing:1px;text-transform:uppercase;">Video</span>
</div>
<?php endif; ?>
<div class="overlay">
<a href="javascript:;" class="gallery-link"
data-type="<?= htmlspecialchars($item['type']) ?>"
data-source="<?= htmlspecialchars($item['webPath']) ?>"
aria-label="View <?= htmlspecialchars($item['name']) ?>">
<i class="fa-solid fa-magnifying-glass-plus"></i>
</a>
</div>
</div>
<div class="content">
<h5 title="<?= htmlspecialchars(ucwords(str_replace(['-','_'], ' ', pathinfo($item['name'], PATHINFO_FILENAME)))) ?>">
<?= htmlspecialchars(ucwords(str_replace(['-','_'], ' ', pathinfo($item['name'], PATHINFO_FILENAME)))) ?>
</h5>
<p><?= $item['type'] === 'video' ? 'Video' : 'Photo' ?></p>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
<?php $gi++; endforeach; ?>
</div>
<?php $firstPane = false; endforeach; ?>
<?php else: ?>
<div class="alert alert-warning">No gallery content found. Please add images/videos inside <code><?= htmlspecialchars($galleryBaseRelative) ?></code>.</div>
<?php endif; ?>
</div><!-- /.gallery-tabs-wrapper -->
</div>
</div>
<!-- rts cta area start -->
<?php include 'inc/cta-section.php'; ?>
<!-- rts cta area end -->
<?php include 'inc/footer.php'; ?>
<!-- inner menu area desktop End -->
<script>
document.addEventListener('DOMContentLoaded', function () {
const PER_PAGE = 9;
// ── Image Lazy Loader ──────────────────────────────────────────
const loadImages = (container) => {
container.querySelectorAll('img.gallery-img[data-src]').forEach(img => {
const src = img.dataset.src;
if (!src) return;
const skeleton = img.closest('.gallery-card .thumbnail')?.querySelector('.gallery-skeleton');
const onLoad = () => {
img.classList.add('loaded');
if (skeleton) {
skeleton.style.opacity = '0';
setTimeout(() => { skeleton.style.display = 'none'; }, 300);
}
};
img.addEventListener('load', onLoad, { once: true });
img.addEventListener('error', () => { if (skeleton) skeleton.style.display = 'none'; }, { once: true });
img.setAttribute('src', src);
img.removeAttribute('data-src');
if (img.complete && img.naturalWidth > 0) { onLoad(); }
});
};
// ── Pagination ────────────────────────────────────────────────
const initPagination = (group) => {
const items = Array.from(group.querySelectorAll('.gallery-item'));
// Remove any stale pagination container
const existing = group.querySelector('.gallery-pagination');
if (existing) existing.remove();
if (items.length <= PER_PAGE) {
items.forEach(i => { i.style.display = ''; });
loadImages(group);
return;
}
const totalPages = Math.ceil(items.length / PER_PAGE);
const pager = document.createElement('div');
pager.className = 'gallery-pagination';
group.appendChild(pager);
const goToPage = (page) => {
const start = (page - 1) * PER_PAGE;
const end = start + PER_PAGE;
items.forEach((item, i) => {
item.style.display = (i >= start && i < end) ? '' : 'none';
});
// Load images only for newly visible items
items.slice(start, end).forEach(item => loadImages(item));
// Rebuild pagination UI
pager.innerHTML = '';
const addBtn = (label, targetPage, isActive) => {
const btn = document.createElement('button');
btn.className = 'gallery-page-btn' + (isActive ? ' active' : '');
if (label === '‹' || label === '›') btn.classList.add('nav-btn');
btn.textContent = label;
btn.addEventListener('click', () => {
goToPage(targetPage);
group.closest('.gallery-tabs-wrapper')?.scrollIntoView({ behavior: 'smooth', block: 'start' });
});
pager.appendChild(btn);
};
// Prev button
if (page > 1) addBtn('← Prev', page - 1, false);
// Show window of 5 page numbers centered on current
const winSize = 5;
const winStart = Math.max(1, page - Math.floor(winSize / 2));
const winEnd = Math.min(totalPages, winStart + winSize - 1);
const actualStart = Math.max(1, winEnd - winSize + 1);
for (let p = actualStart; p <= winEnd; p++) {
addBtn(p, p, p === page);
}
// Page info
if (totalPages > 1) {
const info = document.createElement('span');
info.className = 'gallery-page-info';
info.textContent = `of ${totalPages}`;
pager.appendChild(info);
}
// Next button
if (page < totalPages) addBtn('Next →', page + 1, false);
};
goToPage(1);
};
// ── Category Tab Switching ─────────────────────────────────────
const allPanes = document.querySelectorAll('.gallery-pane');
document.querySelectorAll('.gallery-tab-btn').forEach(btn => {
btn.addEventListener('click', function () {
const paneId = this.dataset.paneId;
document.querySelectorAll('.gallery-tab-btn').forEach(b => b.classList.remove('active'));
this.classList.add('active');
allPanes.forEach(p => { p.style.display = 'none'; });
const targetPane = document.getElementById(paneId);
if (!targetPane) return;
targetPane.style.display = 'block';
const firstGroup = targetPane.querySelector('.gallery-group');
if (firstGroup) initPagination(firstGroup);
});
});
// ── Subcategory (Group) Pill Switching ─────────────────────────
document.addEventListener('click', function (e) {
const btn = e.target.closest('.group-pill-btn');
if (!btn) return;
const groupName = btn.dataset.group;
const pane = btn.closest('.gallery-pane');
if (!pane) return;
pane.querySelectorAll('.group-pill-btn').forEach(b => b.classList.remove('active'));
btn.classList.add('active');
let activeGroup = null;
pane.querySelectorAll('.gallery-group').forEach(g => {
const show = g.dataset.group === groupName;
g.style.display = show ? 'block' : 'none';
if (show) activeGroup = g;
});
if (activeGroup) initPagination(activeGroup);
});
// ── Init first pane on page load ───────────────────────────────
const firstPane = document.querySelector('.gallery-pane');
if (firstPane) {
const firstGroup = firstPane.querySelector('.gallery-group');
if (firstGroup) initPagination(firstGroup);
}
// ── Lightbox ───────────────────────────────────────────────────
const openLightbox = (items, startIndex) => {
let idx = startIndex;
const renderMedia = () => {
const item = items[idx];
if (!item) return '';
if (item.type === 'video') {
return `<video src="${item.source}" controls autoplay
style="max-width:100%;max-height:75vh;object-fit:contain;display:block;margin:auto;border-radius:8px;"></video>`;
}
return `<img src="${item.source}" alt="${item.caption || ''}"
style="max-width:100%;max-height:75vh;object-fit:contain;display:block;margin:auto;border-radius:8px;"/>`;
};
const lb = document.createElement('div');
lb.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.88);display:flex;align-items:center;justify-content:center;z-index:9999;padding:20px;cursor:pointer;';
lb.innerHTML = `
<div style="position:relative;max-width:90vw;width:100%;cursor:default;" onclick="event.stopPropagation()">
<button class="lb-close"
style="position:absolute;top:-44px;right:0;background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.3);color:#fff;font-size:20px;width:36px;height:36px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;">✕</button>
<button class="lb-prev"
style="position:absolute;top:50%;left:-52px;transform:translateY(-50%);background:rgba(255,255,255,0.9);border:none;font-size:24px;width:42px;height:42px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;">‹</button>
<button class="lb-next"
style="position:absolute;top:50%;right:-52px;transform:translateY(-50%);background:rgba(255,255,255,0.9);border:none;font-size:24px;width:42px;height:42px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;">›</button>
<div class="lb-media" style="min-height:150px;display:flex;align-items:center;justify-content:center;">${renderMedia()}</div>
<div class="lb-caption" style="color:rgba(255,255,255,0.7);text-align:center;margin-top:10px;font-size:13px;">${items[idx]?.caption || ''}</div>
<div style="color:rgba(255,255,255,0.4);text-align:center;margin-top:4px;font-size:12px;">
<span class="lb-counter">${idx + 1} / ${items.length}</span>
</div>
</div>`;
const update = () => {
lb.querySelector('.lb-media').innerHTML = renderMedia();
lb.querySelector('.lb-caption').textContent = items[idx]?.caption || '';
lb.querySelector('.lb-counter').textContent = `${idx + 1} / ${items.length}`;
};
const close = () => { if (document.body.contains(lb)) document.body.removeChild(lb); };
lb.addEventListener('click', close);
lb.querySelector('.lb-close').addEventListener('click', e => { e.stopPropagation(); close(); });
lb.querySelector('.lb-prev').addEventListener('click', e => {
e.stopPropagation();
idx = (idx - 1 + items.length) % items.length; update();
});
lb.querySelector('.lb-next').addEventListener('click', e => {
e.stopPropagation();
idx = (idx + 1) % items.length; update();
});
const onKey = (e) => {
if (e.key === 'Escape') { close(); document.removeEventListener('keydown', onKey); }
if (e.key === 'ArrowLeft') { idx = (idx - 1 + items.length) % items.length; update(); }
if (e.key === 'ArrowRight') { idx = (idx + 1) % items.length; update(); }
};
document.addEventListener('keydown', onKey);
document.body.appendChild(lb);
};
// Lightbox trigger
document.addEventListener('click', function (e) {
const link = e.target.closest('.gallery-link');
if (!link) return;
e.preventDefault();
const itemEl = link.closest('.gallery-item');
if (!itemEl) return;
const group = itemEl.closest('.gallery-group');
const scope = group || itemEl.closest('.gallery-pane');
const allItems = scope ? Array.from(scope.querySelectorAll('.gallery-item')) : [];
const items = allItems.map(ai => ({
source: ai.dataset.source,
type: ai.dataset.type,
caption: ai.querySelector('.content h5')?.textContent?.trim() || ''
}));
const startIndex = allItems.indexOf(itemEl);
openLightbox(items, startIndex >= 0 ? startIndex : 0);
});
});
</script>
<?php include 'inc/common-end.php'; ?>
<div id="side-bar" class="side-bar header-two">
<button class="close-icon-menu"><i class="far fa-times"></i></button>
<?php include 'inc/sidebar.php'; ?>
</div>