Hi Carmen,
The relevant section of your original code is:
- Code: Select all
<cms:pages>
<cms:show_repeatable 'seccion_profesional' >
<li class="item <cms:show k_page_name />">
<a href="<cms:show imagen_profesional />" class="fancybox-media" data-title-id="title-01">
<div class="caption">
<h3><cms:show titulo_profesional /></h3>
<span class="meta"><cms:show subtitulo_profesional /></span>
</div>
<img src="<cms:show imagen_profesional1 />" alt="" />
</a>
<div id="title-01" class="info hidden">
<h2><cms:show titulo_profesional_interno /></h2>
<div class="fancybox-desc"><cms:show profesional_contenido /><img src="<cms:show imagen_profesional2 />" alt="" /></div>
</div>
</li>
</cms:show_repeatable>
</cms:pages>
The problem you are experiencing is caused by the highlighted text in the following two lines:
<a href="<cms:show imagen_profesional />" class="fancybox-media" data-title-id="title-01">
<div id="title-01" class="info hidden">
These values need to be unique for Fancybox to display the correct information. The following changes should resolve the issue:
- Code: Select all
<a href="<cms:show imagen_profesional />" class="fancybox-media" data-title-id="title-<cms:show k_page_id />-<cms:show k_count />">
<div id="title-<cms:show k_page_id />-<cms:show k_count />" class="info hidden">
Thanks for providing a clear video explanation