Islamic Art Calligraphy And Design

← Back to Islamic History & Sacred Heritage

jQuery(document).ready(function($){ let currentIndex = 0; let images = []; // Initialize Lightbox on all gallery images $('.pixel-gallery a').each(function(){ images.push({src: $(this).attr('href'), caption: $(this).find('img').attr('alt')}); }); // Build lightbox HTML $('body').append(` `); const $overlay = $('.pixel-lightbox-overlay'); const $img = $('.pixel-lightbox-container img'); const $caption = $('.pixel-lightbox-caption'); // Show image function function showImage(index){ if(index < 0) index = images.length - 1; if(index >= images.length) index = 0; currentIndex = index; $img.css('opacity',0); $img.attr('src', images[currentIndex].src); $caption.text(images[currentIndex].caption); $img.on('load', function(){ $(this).css('opacity',1); }); $overlay.fadeIn(200); preloadImages(currentIndex); } function closeLightbox(){ $overlay.fadeOut(200); } // Open lightbox on click $('.pixel-gallery a').click(function(e){ e.preventDefault(); let idx = $(this).index('.pixel-gallery a'); showImage(idx); }); // Navigation $('.pixel-lightbox-close').click(closeLightbox); $overlay.click(function(e){ if(e.target === this) closeLightbox(); }); $('.pixel-lightbox-arrow.left').click(function(){ showImage(currentIndex - 1); }); $('.pixel-lightbox-arrow.right').click(function(){ showImage(currentIndex + 1); }); // Keyboard navigation $(document).keydown(function(e){ if($overlay.is(':visible')){ if(e.key === 'ArrowLeft') showImage(currentIndex - 1); if(e.key === 'ArrowRight') showImage(currentIndex + 1); if(e.key === 'Escape') closeLightbox(); } }); // Touch swipe (mobile) let touchStartX = 0; $overlay.on('touchstart', function(e){ touchStartX = e.originalEvent.touches[0].clientX; }); $overlay.on('touchend', function(e){ let touchEndX = e.originalEvent.changedTouches[0].clientX; if(touchEndX - touchStartX > 50) showImage(currentIndex - 1); if(touchStartX - touchEndX > 50) showImage(currentIndex + 1); }); // Lazy preload next/previous images function preloadImages(index){ let next = (index+1) % images.length; let prev = (index-1+images.length) % images.length; $('')[0].src = images[next].src; $('')[0].src = images[prev].src; } // Fullscreen toggle const $fullscreen = $('.pixel-lightbox-fullscreen'); $fullscreen.click(function(e){ e.stopPropagation(); if(!$overlay.hasClass('fullscreen')){ $overlay.addClass('fullscreen'); $overlay.css({background:'rgba(0,0,0,0.95)'}); $('.pixel-lightbox-container').css({maxWidth:'100%', maxHeight:'100%'}); } else { $overlay.removeClass('fullscreen'); $overlay.css({background:'rgba(0,0,0,0.85)'}); $('.pixel-lightbox-container').css({maxWidth:'90%', maxHeight:'90%'}); } }); // Click to zoom $img.click(function(){ $('.pixel-lightbox-container').toggleClass('zoomed'); }); });

► Necessary Cookies Always Active

Necessary cookies enable essential site features like secure log-ins and consent preference adjustments. They do not store personal data.

► Functional Cookies Remark

Functional cookies support features like content sharing on social media, collecting feedback, and enabling third-party tools.

► Analytical Cookies Remark

Analytical cookies track visitor interactions, providing insights on metrics like visitor count, bounce rate, and traffic sources.

► Advertisement Cookies Remark

Advertisement cookies deliver personalized ads based on your previous visits and analyze the effectiveness of ad campaigns.