Fancybox és l'alternativa de lightbox definitiva de JavaScript que estableix l'estàndard per a l'experiència d'usuari premium a la pantalla multimèdia. Admet imatges, vídeos, mapes, contingut en línia, iframes i qualsevol altre contingut HTML.

CDN

Si preferiu instal·lar des d'una xarxa de lliurament de contingut:

<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js"></script>
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css"
/>

Imatges individuals

Si no voleu crear una galeria, utilitzeu un data-fancyboxatribut buit.

<a
  data-fancybox
  data-src="https://lipsum.app/id/1/1600x1200"
  data-caption="Hello world"
>
  <img src="https://lipsum.app/id/1/200x150" width="200" height="150" alt="" />
</a>

Galeria d'imatges

Les galeries es creen afegint el mateix data-fancyboxvalor d'atribuir a diversos elements. Per exemple, si afegint data-fancybox="gallery"atributs a diversos elements, es crearà una galeria a partir de tots aquests elements.

<a  data-fancybox="gallery"  data-src="https://lipsum.app/id/2/1600x1200"  data-caption="descripcio">
<img src="https://lipsum.app/id/2/200x150" width="200" height="150" alt="" /></a>

Galeria de vídeos amb miniatures:

<a href="video-a.mp4" data-fancybox="gallery">
  <img src="thumbnail-a.jpeg" />
</a>

<a href="video-b.mp4" data-fancybox="gallery">
  <img src="thumbnail-b.jpeg" />
</a>

<a href="video-c.mp4" data-fancybox="gallery">
  <img src="thumbnail-c.jpeg" />
</a>

Exemples d'enllaços compatibles:

// YouTube video
https://www.youtube.com/watch?v=z2X2HaTvkl8

// YouTube video with custom start time
https://www.youtube.com/watch?v=dZRqB0JLizw&t=40s

// Vimeo video
https://vimeo.com/259411563

// Vimeo video with custom start time
https://vimeo.com/577635596#t=11m11s

// Private Vimeo video with hash
https://vimeo.com/705652986/edf22302ef