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
1
2
<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">
3
<div class="relative w-10/12 md:w-4/6 top-20 mx-auto">
4
<img src="" class="w-full h-full object-center object-cover shadow-lg rounded-md " alt="Image Modal">
5
</div>
6
</div>
7
8
<script>
9
// all images inside the image modal content class
10
const lightboxImages = document.querySelectorAll('img[open-modal="true"]');
11
console.log(lightboxImages);
12
13
const modalElement = element =>
14
document.querySelector(`#modal ${element}`);
15
16
const body = document.querySelector('body');
17
// closes modal on clicking anywhere and adds overflow back
18
document.addEventListener('click', () => {
19
body.style.overflow = 'auto';
20
modalPopup.style.display = 'none';
21
});
22
23
const modalPopup = document.querySelector('#modal');
24
25
// loops over each modal content img and adds click event functionality
26
lightboxImages.forEach(img => {
27
const data = img.dataset;
28
img.addEventListener('click', e => {
29
body.style.overflow = 'hidden';
30
e.stopPropagation();
31
modalPopup.style.display = 'block';
32
modalElement('img').src = img.src;
33
});
34
});
35
</script>
Copied!
Here is a small demo on how to do this
Copy link