Open akhost opened 3 years ago
I am trying to add support for webp image formats with jpg fallbacks. When I write my listener like this the lightbox works as intended:
window.addEventListener('load', (event) => { document.querySelectorAll('.modal').forEach(image => { image.addEventListener('click', e => { basicLightbox.create(` <img src="` + image.getAttribute('data-image') + `.jpg"> `).show(); }); }); });
However, when I write my listener like this, the lightbox does not close when I click on the image, only when I click on the background, making the lightbox difficult to close:
window.addEventListener('load', (event) => { document.querySelectorAll('.modal').forEach(image => { image.addEventListener('click', e => { basicLightbox.create(` <picture> <source src="` + image.getAttribute('data-image') + `.webp" type="image/webp" srcset=" ` + image.getAttribute('data-image') + `.webp "> <img src="` + image.getAttribute('data-image') + `.jpg" data-image="{{image.path}}" srcset=" ` + image.getAttribute('data-image') + `.jpg "> </picture> `).show(); }); }); });
I imagine this has something to do with the <picture> tag. Any thoughts on why this would be happening? Thanks
<picture>
Ah, I see #35, but it does not appear that this solved my issue, as it is still happening? Thanks
I am trying to add support for webp image formats with jpg fallbacks. When I write my listener like this the lightbox works as intended:
However, when I write my listener like this, the lightbox does not close when I click on the image, only when I click on the background, making the lightbox difficult to close:
I imagine this has something to do with the
<picture>
tag. Any thoughts on why this would be happening? Thanks