CODEWITHSUNDEEP
jqueryhtmlmagnific-popup
allinonemovie
allinonemovie

Reputation: 734

Magnific Popup fallback image source

How can I use magnific popup with a fallback image format? I want to use webp for all browsers that support it, but jpeg as a fallback. I want to deploy my page on gitlab pages, which is why the switch has to be done client-side. Usually one would do something like this

<picture>
    <source srcset="/path/to/image.webp" type="image/webp">
    <source srcset="/path/to/image.jpeg" type="image/jpeg">
</picture>

to serve a fallback for the webp-format, but I don't know how to do this with magnific popup. Here is my current markup:

<a class="image-popup" title="some title" href="/path/to/image.webp">
    <i class="lni lni-zoom-in"></i>
</a>

And here is my js-code to initialize magnific popup:

$('.image-popup').magnificPopup({
  type: 'image',
  gallery:{
    enabled:true
  }
});

Upvotes: 0

Views: 444

Answers (1)

Olaf H.
Olaf H.

Reputation: 46

I did this by using the img tag directly instead of a and then handling an error when loading the webp image instead of setting srcset:

<img src="/path/to/image.webp" data-mfp-src="/path/to/image.webp" onerror="this.onerror=null;this.src='/path/to/image.jpeg';data-mfp-src='/path/to/image.jpeg'" class="image-popup">

Upvotes: 1

Related Questions