Using this technique you will be able to turn every image on your website into a pop-up for bette visibility. There are 2 things you need to do for this.
1. Add open-modal=true as a custom image attribute, like in the video below. Add this to all images you want to be displayed in a pop-up
2. Copy-Paste the code below in the scripts area of your website. This is only doable in Pazly Pro, so you will need a pro or lifetime subscription for this
<div id="modal" class="fixed hidden z-50 inset-0 bg-gray-900 bg-opacity-60 overflow-y-auto h-full w-full px-4">
<div class="relative w-10/12 md:w-4/6 top-20 mx-auto">
<img src="" class="w-full h-full object-center object-cover shadow-lg rounded-md " alt="Image Modal">
</div>
</div>
<script>
// all images inside the image modal content class
const lightboxImages = document.querySelectorAll('img[open-modal="true"]');
console.log(lightboxImages);
const modalElement = element =>
document.querySelector(`#modal ${element}`);
const body = document.querySelector('body');
// closes modal on clicking anywhere and adds overflow back
document.addEventListener('click', () => {
body.style.overflow = 'auto';
modalPopup.style.display = 'none';
});
const modalPopup = document.querySelector('#modal');
// loops over each modal content img and adds click event functionality
lightboxImages.forEach(img => {
const data = img.dataset;
img.addEventListener('click', e => {
body.style.overflow = 'hidden';
e.stopPropagation();
modalPopup.style.display = 'block';
modalElement('img').src = img.src;
});
});
</script>
