Someone has ever used the Fancybox plugin. I have problems with the buttons to go to the previous image and the next one, they do not work for me.
Is it necessary to activate it in some way by jquery? I have not found anything in the instructions of the plugin itself. I think it's all well laid out.
<ul class="thumb__list">
<li class="thumb__item">
<a data-fancybox="images" data-caption="Sala de espera de la Clínica" href="images/sala_de_espera.jpg" class="thumb__veil popup">
<div class="thumb__content">
<svg>
<use xlink:href="icons.svg#icon-resize-full-screen"></use>
</svg>
<p>Sala de espera</p>
</div>
<img src="images/thumb_sala_de_espera.jpg">
</a>
</li>
<li class="thumb__item">
<a data-fancybox="images" data-caption="Recepción" href="images/recepcion.jpg" class="thumb__veil popup">
<div class="thumb__content">
<svg>
<use xlink:href="icons.svg#icon-resize-full-screen"></use>
</svg>
<p>Recepción</p>
</div>
<img src="images/thumb_recepcion.jpg">
</a>
</li>
<li class="thumb__item">
<a data-fancybox="images" data-caption="Acceso a la consulta" href="images/acceso_consulta.jpg" class="thumb__veil popup">
<div class="thumb__content">
<svg>
<use xlink:href="icons.svg#icon-resize-full-screen"></use>
</svg>
<p>Acceso a la consulta</p>
</div>
<img src="images/thumb_acceso_consulta.jpg" class="thumb__veil">
</a>
</li>
<li class="thumb__item">
<a data-fancybox="images" data-caption="Consulta principal" href="images/consulta_2.jpg" class="thumb__veil popup">
<div class="thumb__content">
<svg>
<use xlink:href="icons.svg#icon-resize-full-screen"></use>
</svg>
<p>Consulta principal</p>
</div>
<img src="images/thumb_consulta_2.jpg" class="thumb__veil">
</a>
</li>
<li class="thumb__item">
<a data-fancybox="images" data-caption="Consulta" href="images/consulta.jpg" class="thumb__veil popup">
<div class="thumb__content">
<svg>
<use xlink:href="icons.svg#icon-resize-full-screen"></use>
</svg>
<p>Consulta</p>
</div>
<img src="images/thumb_consulta.jpg" class="thumb__veil">
</a>
</li>
<li class="thumb__item">
<a data-fancybox="images" data-caption="Equipo de la Clínica" href="images/equipo.jpg" class="thumb__veil popup">
<div class="thumb__content">
<svg>
<use xlink:href="icons.svg#icon-resize-full-screen"></use>
</svg>
<p>Equipo de la Clínica</p>
</div>
<img src="images/thumb_equipo.jpg" class="thumb__veil">
</a>
</li>
<li class="thumb__item">
<a data-fancybox="images" data-caption="Instrumental de la Clínica" href="images/instrumental.jpg" class="thumb__veil popup">
<div class="thumb__content">
<svg>
<use xlink:href="icons.svg#icon-resize-full-screen"></use>
</svg>
<p>Instrumental de la Clínica</p>
</div>
<img src="images/thumb_instrumental.jpg" class="thumb__veil">
</a>
</li>
<li class="thumb__item">
<a data-fancybox="images" data-caption="Octopantomografía" href="images/octopantomografia.jpg" class="thumb__veil popup">
<div class="thumb__content">
<svg>
<use xlink:href="icons.svg#icon-resize-full-screen"></use>
</svg>
<p>Octopantomografía</p>
</div>
<img src="images/thumb_octopantomografia.jpg" class="thumb__veil">
</a>
</li>
<li class="thumb__item">
<a data-fancybox="images" data-caption="Radiografía digitalizada" href="images/radiografia_digitalizada.jpg" class="thumb__veil popup">
<div class="thumb__content">
<svg>
<use xlink:href="icons.svg#icon-resize-full-screen"></use>
</svg>
<p>Radiografía digitalizada</p>
</div>
<img src="images/thumb_radiografia_digitalizada.jpg" class="thumb__veil">
</a>
</li>
</ul>