Problema de Fancybox. Imágenes duplicadas

With the modules fancybox i try to show a photo gallery in a modal page (fancybox).

The problem is that the images are showing 11 times and i don't know why. I already search and i use the correct syntax.

Aquí está mi código:

JQUERY

$(".testGatorade[rel=group1]").fancybox({
            'speedIn'        :    200,
            'speedOut'        :    200,
            'overlayShow'    :    false,
            'modal'          : true,
            'showCloseButton' : true,
            'titleShow'       : true,
            'titlePosition'   : 'over',
            'titleFormat'        : function(title, currentArray, currentIndex, currentOpts) {
                return '<span id="fancybox-title-over">Image ' + currentIndex + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
            }
        });

HTML

<div id="slider1">
                <a class ="testGatorade" href = "images/eagle.jpg" rel="group1" title = "Test de titre">
                    <img src = "images/eagle.jpg" width = "300" height = "300"/>
                </a>
                <a class ="testGatorade" href = "images/ring.jpg" rel="group1"></a>
                <a class ="testGatorade" href = "images/tarantula.jpg" rel="group1"></a>
            </div>

Gracias por ayudar,

i work on it since 4 days.

preguntado el 31 de julio de 12 a las 14:07

can you reproduce in a jsfiddle? -

no i cant, its a plugin... fancybox.net/howto -

try updating to fancybox v2, which doesn't suck at all... fancyapps.com/fancybox -

You can add plugins to jsFiddle - all you need is a url to the source code and you can add it as a resource. -

2 Respuestas

I solved duplicate images in fancybox by adjusting the jQuery selector(I just modified the selected class name).More practical information about usage of fancybox

contestado el 17 de mayo de 14 a las 15:05

I have a similar problem and in my case it is caused by non-standard-conform use of the a-tag. I have non-inline-tags within the a-tag (divs and imgs), which should be ok by html5-standards (see here: http://html5doctor.com/block-level-links-in-html-5), but is not valid before that. Mozilla and Chrome render this to a standard-conform a-tag by duplicating / multiplying the a-tag. (you can verify that with the DOM Inspector)

And duplicate a-tags mean duplicate images in your fancybox gallery...

Solution would be to use standard-conform a-tags, so instead of this:

<div>
 <a href="..." class="fancybox" rel="gallery1">
  <img src="..." alt="..." />
  <div class="overlay">
   <div class="overlay_title">...</div>
   <div class="overlay_text"><p>...</p></div>
  </div>
 </a>
</div>

utilizar esto:

<div>
 <a href="..." class="fancybox" rel="gallery1" style="position: absolute; top: 0px; width: 100%; height: 100%; z-index: 100;">
  <span>&nbsp;</span>
 </a>
 <img src="..." alt="..." />
 <div class="overlay">
  <div class="overlay_title">...</div>
  <div class="overlay_text"><p>...</p></div>
 </div>
</div>

Maybe I could help with this...

Respondido el 11 de Septiembre de 15 a las 21:09

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.