Make your image pop

Only available in Pazly Pro ( requires pro or lifetime subscription )

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>

Here is a small demo on how to do this