Image Gallery
.custom-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.9);
display: flex;
align-items: center;
justify-content: center;
z-index: 999999;
}
.custom-carousel {
position: relative;
width: 90%;
max-width: 1000px;
display: flex;
align-items: center;
justify-content: center;
}
.img-wrapper {
flex-grow: 1;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
.img-wrapper img {
max-width: 100%;
max-height: 80vh;
object-fit: contain;
}
.carousel-prev,
.carousel-next {
background: rgba(255,255,255,0.8);
border: none;
font-size: 40px;
width: 50px;
height: 50px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 50%;
transform: translateY(-50%);
user-select: none;
}
.carousel-prev {
left: -70px;
}
.carousel-next {
right: -70px;
}
.carousel-close {
position: absolute;
top: 20px;
right: 30px;
background: none;
border: none;
font-size: 40px;
color: white;
cursor: pointer;
user-select: none;
}
.block-views-blockpress-release-view-block-1 h2{
font-size: 3rem;
font-weight: 700;
text-align: center;
margin-bottom: 35px;
color: #141414;
}
.press-release-table .file--application-pdf {
background-image: none !important;
padding-left: 0 !important;
}
.press-release-table .file--application-pdf a{
text-decoration: none !important;
}
.press-release-table tr{
vertical-align: middle;
}
.press-release-table td img {
width: 150px;
height: 100px;
object-fit: cover;
border-radius:8px;
}
td.views-field.views-field-field-pg-e{
font-size: 0;
}
.block-block-contentaffa215c-1a17-44d3-bef9-f1a429af97e2{
display:none;
}
document.addEventListener('DOMContentLoaded', function() {
const table = document.querySelector('.table.table-striped tbody');
if (!table) return;
table.querySelectorAll('tr').forEach(function(row) {
const images = row.querySelectorAll('td.views-field.views-field-field-pg-e img');
if (images.length > 0) {
images.forEach(function(img, index) {
if (index !== 0) {
img.style.display = 'none';
}
});
const firstImage = images[0];
firstImage.style.cursor = 'pointer';
firstImage.addEventListener('click', function(e) {
e.stopPropagation();
openCarousel(Array.from(images));
});
}
});
function openCarousel(images) {
let currentIndex = 0;
const existingOverlay = document.querySelector('.custom-overlay');
if (existingOverlay) {
existingOverlay.remove();
}
const overlay = document.createElement('div');
overlay.classList.add('custom-overlay');
const carouselContainer = document.createElement('div');
carouselContainer.classList.add('custom-carousel');
const imgWrapper = document.createElement('div');
imgWrapper.classList.add('img-wrapper');
const imgElement = document.createElement('img');
imgElement.src = images[currentIndex].src;
imgElement.alt = images[currentIndex].alt || '';
imgWrapper.appendChild(imgElement);
const prevButton = document.createElement('button');
prevButton.className = 'carousel-prev';
prevButton.innerHTML = '❮';
const nextButton = document.createElement('button');
nextButton.className = 'carousel-next';
nextButton.innerHTML = '❯';
const closeButton = document.createElement('button');
closeButton.className = 'carousel-close';
closeButton.innerHTML = '×';
carouselContainer.appendChild(prevButton);
carouselContainer.appendChild(imgWrapper);
carouselContainer.appendChild(nextButton);
overlay.appendChild(closeButton);
overlay.appendChild(carouselContainer);
document.body.appendChild(overlay);
function showImage(index) {
imgElement.src = images[index].src;
imgElement.alt = images[index].alt || '';
}
prevButton.addEventListener('click', function(e) {
e.stopPropagation();
currentIndex = (currentIndex - 1 + images.length) % images.length;
showImage(currentIndex);
});
nextButton.addEventListener('click', function(e) {
e.stopPropagation();
currentIndex = (currentIndex + 1) % images.length;
showImage(currentIndex);
});
closeButton.addEventListener('click', function(e) {
e.stopPropagation();
overlay.remove();
});
overlay.addEventListener('click', function(e) {
if (e.target === overlay) {
overlay.remove();
}
});
// Close on Escape or Arrow navigation
document.addEventListener('keydown', function(event) {
if (event.key === "Escape") {
overlay.remove();
} else if (event.key === "ArrowLeft") {
currentIndex = (currentIndex - 1 + images.length) % images.length;
showImage(currentIndex);
} else if (event.key === "ArrowRight") {
currentIndex = (currentIndex + 1) % images.length;
showImage(currentIndex);
}
}, { once: true });
}
});
const tableLinks = document.querySelectorAll('table a');
tableLinks.forEach(function(link) {
link.setAttribute('target', '_blank');
});
.pagination-controls {
margin-top: 1rem;
text-align: center;
}
.pagination-controls button, .pagination-controls span {
margin: 0 3px;
padding: 5px 10px;
}
.pagination-controls button {
cursor: pointer;
border: 1px solid #ddd;
background: white;
}
.pagination-controls button.active {
background-color: #007bff;
color: white;
border-color: #007bff;
}
.ellipsis {
display: inline-block;
padding: 0 5px;
}
document.addEventListener('DOMContentLoaded', function () {
const table = document.querySelector('.table-striped');
if (!table) return;
const rows = table.querySelectorAll('tbody tr');
const rowsPerPage = 2;
const totalPages = Math.ceil(rows.length / rowsPerPage);
let currentPage = 1;
function showPage(page) {
const start = (page - 1) * rowsPerPage;
const end = start + rowsPerPage;
rows.forEach((row, index) => {
row.style.display = (index >= start && index < end) ? 'table-row' : 'none';
});
}
function createPaginationControls() {
let paginationDiv = document.querySelector('.pagination-controls');
if (!paginationDiv) {
paginationDiv = document.createElement('div');
paginationDiv.className = 'pagination-controls';
const tableWrapper = table.closest('.table-responsive');
tableWrapper.parentNode.insertBefore(paginationDiv, tableWrapper.nextSibling);
}
paginationDiv.innerHTML = '';
// Previous Button
const prevBtn = document.createElement('button');
prevBtn.innerHTML = '« Prev';
prevBtn.disabled = currentPage === 1;
prevBtn.addEventListener('click', () => {
if (currentPage > 1) {
currentPage--;
showPage(currentPage);
createPaginationControls();
}
});
paginationDiv.appendChild(prevBtn);
// First page
addPageButton(paginationDiv, 1);
// Dots if needed
if (totalPages > 2 && currentPage > 2) {
addEllipsis(paginationDiv);
}
// Nearby pages
const start = Math.max(2, currentPage - 1);
const end = Math.min(totalPages - 1, currentPage + 1);
for (let i = start; i <= end; i++) {
addPageButton(paginationDiv, i);
}
if (totalPages > 2 && currentPage < totalPages - 1) {
addEllipsis(paginationDiv);
}
// Last page
if (totalPages > 1) {
addPageButton(paginationDiv, totalPages);
}
// Next Button
const nextBtn = document.createElement('button');
nextBtn.innerHTML = 'Next »';
nextBtn.disabled = currentPage === totalPages;
nextBtn.addEventListener('click', () => {
if (currentPage < totalPages) {
currentPage++;
showPage(currentPage);
createPaginationControls();
}
});
paginationDiv.appendChild(nextBtn);
}
function addPageButton(container, page) {
const button = document.createElement('button');
button.textContent = page;
if (page === currentPage) button.classList.add('active');
button.addEventListener('click', () => {
currentPage = page;
showPage(currentPage);
createPaginationControls();
});
container.appendChild(button);
}
function addEllipsis(container) {
const ellipsis = document.createElement('span');
ellipsis.textContent = '...';
ellipsis.className = 'ellipsis';
container.appendChild(ellipsis);
}
// Init
showPage(currentPage);
createPaginationControls();
});
@media (max-width: 768px) { .carousel-prev { left: -28px !important; } .carousel-prev, .carousel-next { background: rgba(255, 255, 255, 0.8); border: none; font-size: 16px; width: 25px; height: 25px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; position: absolute; top: 50%; left: 100%; transform: translateY(-50%); user-select: none; } .custom-carousel { position: relative; width: 85%; max-width: 1000px; display: flex; align-items: center; justify-content: center; } }
