Responsive WEBP in combinatie met Lightbox

[DieRooie]

Ik ben momenteel bezig om mijn images op een website allemaal om te zetten naar Webp.
Ik gebruik daar standaard de code voor zoals onderstaande:

code:

<picture>
  <source type="image/webp"
       srcset="
                               plaatje1-1920.webp 1920w,
                               plaatje1-1140.webp 1140w,
                               plaatje1-768.webp 768w" >
  <source type="image/jpeg"
       srcset="
                               plaatje1-1920.jpg 1920w,
                               plaatje1-1140.jpg 1140w,
                               plaatje1-768.jpg 768w" >
  <img src="plaatje1-768.jpg" style="display:block;max-width: 100%" alt="omschrijving">
</picture>

Dat werkt prima, maar nu wil ik er een lightbox van maken. Ik gebruik als voorbeeld nu een Joomla site waar ik dit gebruik met bijvoorbeeld JCE Mediabox.

Die werkt normaal gesproken door een hyperlink om de image te zetten met daaraan de toevoeging van een class ="jcepopup". Overigens lijken veel andere lightboxen hierop. Maar als ik er een hyperlink omheen zet heeft deze een directe link naar een afbeelding nodig. Bijvoorbeeld:
<a href="plaatje.jpg" class="jcepopup">

code:

<picture>
  <source type="image/webp"
       srcset="
                               plaatje1-1920.webp 1920w,
                               plaatje1-1140.webp 1140w,
                               plaatje1-768.webp 768w" >
  <source type="image/jpeg"
       srcset="
                               plaatje1-1920.jpg 1920w,
                               plaatje1-1140.jpg 1140w,
                               plaatje1-768.jpg 768w" >
  <a href="plaatje.jpg" class="jcepopup">   <!-- alleen jpg?? -->
    <img src="plaatje1-768.jpg" style="display:block;max-width: 100%" alt="omschrijving">
  </a>
</picture>

Maar dan kan ik dus niet aftasten of de browser Webp of jpeg kan gebruiken? Hoe kan ik dat ZONDER JavaScript doen? Of is dat niet mogelijk?

[_NooT_]

Dat ligt denk ik aan de lightbox plugin die je gebruikt.
Er zijn ook plugins waarbij je niet uitsluitend naar een afbeelding hoeft te linken, maar waarbij je ook naar bijvoorbeeld een 'container' kan verwijzen.

In dat geval zou je de picture elementen in een div-container kunnen plaatsen.
Vervolgens zal je daar dan een classname en of id moeten meegeven.
Dat zou ook direct op het picture-element kunnen.

Ik ben zelf altijd erg te spreken geweest over Magnific Popup.


Om te voorkomen dat de afbeeldingen gelijk ingeladen worden zal je het moeten combineren met lazy loading.
Hiervoor kan ik lazySizes aanraden. Dit is de beste lazy load plugin die ik ken en ondersteunt ook picture elementen en srcsets.

[DieRooie]

Ik ken beide plugins inderdaad. Wist niet dat Magnific dat op die manier kon. Ik ga kijken of ik het aan de praat kan krijgen. Dank je wel @_NooT_