<!-- @tuanphan summary block lightbox with slideshow navigation -->
<style>
:root {
--lb-overlay-bg: rgba(255, 255, 255, 0.95); /* Overlay background color */
--lb-text-color: #000; /* Text color */
--lb-padding: 20px; /* General padding */
--lb-padding-top: 20px; /* Top padding */
--lb-padding-mobile: 60px 20px 40px; /* Mobile padding (top, left/right, bottom) */
--lb-content-max-width: 900px; /* Maximum content width */
--lb-close-position: 16px; /* Close button position from corner */
--lb-arrow-icon-size: 24px; /* Arrow icon size */
--lb-arrow-position: 20px; /* Arrow position from edge */
--lb-arrow-position-mobile: 10px; /* Arrow position on mobile */
--lb-loading-padding: 40px; /* Loading state padding */
}
.tp-summary-lb-content img {margin-left: auto;margin-right: auto;}.tp-summary-lb-text {text-align: center;}.tp-summary-lb-overlay{position:fixed;inset:0;background:var(--lb-overlay-bg);display:none;z-index:9999;overflow-y:auto}.tp-summary-lb-open{overflow:hidden}.tp-summary-lb-inner{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:var(--lb-padding);padding-top:var(--lb-padding-top)}.tp-summary-lb-content{max-width:var(--lb-content-max-width);width:100%;color:var(--lb-text-color)}.tp-summary-lb-content img{max-width:100%;height:auto;display:block}.tp-summary-lb-text{margin-top:20px;line-height:1.6}.tp-summary-lb-close{position:fixed;top:var(--lb-close-position);right:var(--lb-close-position);width:30px;height:30px;display:grid;place-items:center;border:none;background:transparent;cursor:pointer;z-index:100001}.tp-summary-lb-close svg{width:100%;height:100%}.tp-summary-lb-close svg path{stroke:#000;stroke-width:3px;fill:none}.tp-summary-lb-arrow{position:fixed;top:50%;transform:translateY(-50%);display:grid;place-items:center;border:none;background:transparent;cursor:pointer;z-index:10001}.tp-summary-lb-arrow-left{left:var(--lb-arrow-position)}.tp-summary-lb-arrow-right{right:var(--lb-arrow-position)}.tp-summary-lb-arrow svg{width:var(--lb-arrow-icon-size);height:var(--lb-arrow-icon-size)}.tp-summary-lb-arrow svg polyline{stroke:#000;stroke-width:1px}.tp-summary-lb-loading{text-align:center;padding:var(--lb-loading-padding)}@media (max-width:768px){.tp-summary-lb-inner{padding:var(--lb-padding-mobile)}.tp-summary-lb-arrow{width:var(--lb-arrow-size-mobile);height:var(--lb-arrow-size-mobile)}.tp-summary-lb-arrow-left{left:var(--lb-arrow-position-mobile)}.tp-summary-lb-arrow-right{right:var(--lb-arrow-position-mobile)}}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
const summaryItems = document.querySelectorAll('.summary-item');
if (summaryItems.length === 0) return;
const overlay = document.createElement('div');
overlay.className = 'tp-summary-lb-overlay';
overlay.innerHTML = `
<div class="tp-summary-lb-inner">
<div class="tp-summary-lb-content">
<div class="tp-summary-lb-loading">Loading...</div>
</div>
</div>
<button class="tp-summary-lb-close" aria-label="Close">
<svg viewBox="0 0 40 40">
<path d="M4.3,35.7L35.7,4.3"></path>
<path d="M4.3,4.3l31.4,31.4"></path>
</svg>
</button>
<button class="tp-summary-lb-arrow tp-summary-lb-arrow-left" aria-label="Previous">
<svg viewBox="0 0 9 16">
<polyline fill="none" stroke-miterlimit="10" points="7.3,14.7 2.5,8 7.3,1.2"></polyline>
</svg>
</button>
<button class="tp-summary-lb-arrow tp-summary-lb-arrow-right" aria-label="Next">
<svg viewBox="0 0 9 16">
<polyline fill="none" stroke-miterlimit="10" points="1.6,1.2 6.5,7.9 1.6,14.7"></polyline>
</svg>
</button>
`;
document.body.appendChild(overlay);
const contentDiv = overlay.querySelector('.tp-summary-lb-content');
const closeBtn = overlay.querySelector('.tp-summary-lb-close');
const prevBtn = overlay.querySelector('.tp-summary-lb-arrow-left');
const nextBtn = overlay.querySelector('.tp-summary-lb-arrow-right');
let currentImageIndex = 0;
let slideshowImages = [];
let textContent = '';
async function loadBlogContent(url) {
try {
contentDiv.innerHTML = '<div class="tp-summary-lb-loading">Loading...</div>';
const response = await fetch(url + '?format=json');
const data = await response.json();
const itemData = data.item;
const bodyHTML = itemData.body;
const parser = new DOMParser();
const doc = parser.parseFromString(bodyHTML, 'text/html');
// Find gallery slideshow block
const galleryBlock = doc.querySelector('.sqs-block-gallery');
// Find text content block
const textBlock = doc.querySelector('.sqs-html-content');
textContent = textBlock ? textBlock.innerHTML : '';
if (galleryBlock) {
// Extract all images from slideshow
const slideImages = galleryBlock.querySelectorAll('.slide img.thumb-image');
slideshowImages = [];
slideImages.forEach(img => {
const imgSrc = img.getAttribute('data-src') || img.getAttribute('data-image') || img.src;
const imgAlt = img.alt || itemData.title;
if (imgSrc) {
slideshowImages.push({
src: imgSrc,
alt: imgAlt
});
}
});
// Show first image
if (slideshowImages.length > 0) {
currentImageIndex = 0;
showCurrentImage();
// Show/hide arrows based on number of images
if (slideshowImages.length > 1) {
prevBtn.style.display = 'grid';
nextBtn.style.display = 'grid';
} else {
prevBtn.style.display = 'none';
nextBtn.style.display = 'none';
}
} else {
contentDiv.innerHTML = '<div class="tp-summary-lb-loading">No images found</div>';
}
} else {
contentDiv.innerHTML = '<div class="tp-summary-lb-loading">No slideshow found</div>';
}
} catch (error) {
console.error('Error loading content:', error);
contentDiv.innerHTML = '<div class="tp-summary-lb-loading">Error loading content</div>';
}
}
function showCurrentImage() {
if (slideshowImages.length > 0 && currentImageIndex >= 0 && currentImageIndex < slideshowImages.length) {
const currentImage = slideshowImages[currentImageIndex];
let content = `<img src="${currentImage.src}" alt="${currentImage.alt}">`;
// Add text content below image
if (textContent) {
content += `<div class="tp-summary-lb-text">${textContent}</div>`;
}
contentDiv.innerHTML = content;
}
}
function openLightbox(link) {
const url = link.href;
loadBlogContent(url);
overlay.style.display = 'block';
document.documentElement.classList.add('tp-summary-lb-open');
overlay.scrollTop = 0;
}
function closeLightbox() {
overlay.style.display = 'none';
document.documentElement.classList.remove('tp-summary-lb-open');
slideshowImages = [];
currentImageIndex = 0;
textContent = '';
}
function showPrevious() {
if (slideshowImages.length === 0) return;
currentImageIndex--;
if (currentImageIndex < 0) {
currentImageIndex = slideshowImages.length - 1;
}
showCurrentImage();
overlay.scrollTop = 0;
}
function showNext() {
if (slideshowImages.length === 0) return;
currentImageIndex++;
if (currentImageIndex >= slideshowImages.length) {
currentImageIndex = 0;
}
showCurrentImage();
overlay.scrollTop = 0;
}
// Attach click handlers to summary items
summaryItems.forEach((item) => {
const link = item.querySelector('.summary-title-link');
if (link) {
link.addEventListener('click', function(e) {
e.preventDefault();
openLightbox(link);
});
}
const thumbnail = item.querySelector('.summary-thumbnail-container');
if (thumbnail && link) {
thumbnail.addEventListener('click', function(e) {
e.preventDefault();
openLightbox(link);
});
}
});
// Button handlers
closeBtn.addEventListener('click', closeLightbox);
prevBtn.addEventListener('click', showPrevious);
nextBtn.addEventListener('click', showNext);
// Click outside to close
overlay.addEventListener('click', function(e) {
if (e.target === overlay || e.target.classList.contains('tp-summary-lb-inner')) {
closeLightbox();
}
});
// Keyboard navigation
document.addEventListener('keydown', function(e) {
if (overlay.style.display === 'block') {
if (e.key === 'Escape') {
closeLightbox();
} else if (e.key === 'ArrowLeft') {
showPrevious();
} else if (e.key === 'ArrowRight') {
showNext();
}
}
});
});
</script>