<picture> tag support
akhost opened this issue · comments
akhost commented
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