Gallery going to show triple cloned images

[SynCap]

I've got a situation where all gallery images going a triple cloned in showcase mode. In initial markup all links are unique and all "href" are unique too, but in showcase mode all images multiplicates suddenly. In thumbnail bar they also occurs in a triple number.

All links looks like that:

<a class="mix type-ec" href="img/photo/ec-02.jpg" data-myorder="0" data-fancybox="gallery-ec" data-caption="<h4>EC 02</h4>">
    <div class="col-lg-3 col-md-4 col-sm-6">
        <img src="img/photo/thumb/ec-02.jpg" alt="img" />
        <div class="figcaption">
            <h4>EC 02</h4>
            <p class="price"><span>от </span>8 795 <span>₽</span></p>
            <a href="#modalForm" data-solution="ec-02" class="arctic">заказать</a>
        </div>
    </div>
</a>

All big images are shown by its correct "href" but triple. No initialization by JS code, just data attributes.

UPD: According to number of child DIVs inside a link, cause the adding corresponding number of same images into showcase. When I've replacing DIV to SPAN - all going OK.

It's a bug? Or is a feature?

[fancyapps]

I guess this is due to your code structure. You are trying to create an "a" element around block level elements.

Therefore browser tries to fix your code by duplicating links and if you would use developer tools, you would see that browser renders your code like this -

<p>
    <a class="mix type-ec" href="k.jpg" data-myorder="0" data-fancybox="gallery-ec" data-caption="<h4>EC 02</h4>"></a>
</p>
<div class="col-lg-3 col-md-4 col-sm-6">
    <a class="mix type-ec" href="k.jpg" data-myorder="0" data-fancybox="gallery-ec" data-caption="<h4>EC 02</h4>">
        <img src="m.jpg" alt="img">
    </a>
    <div class="figcaption">
        <a class="mix type-ec" href="k.jpg" data-myorder="0" data-fancybox="gallery-ec" data-caption="<h4>EC 02</h4>">
            <h4>EC 02</h4>
            <p class="price"><span>от </span>8 795 <span>₽</span></p>
        </a>
        <a href="#modalForm" data-solution="ec-02" class="arctic">заказать</a>
    </div>
</div>

In the end, fancyBox sees 3 links having the same data attributes.

This is how your code would work correctly - http://codepen.io/fancyapps/pen/XMPbXP?editors=1000

[asaage]

In the end, fancyBox sees 3 links having the same data attributes.

Could you add a check and reduce for unique items? I use fancybox in combination with a slider-plugin (owl.carousel or slick.carousel) which constanly clone my fancybox-items.

[fancyapps]

@asaage Simply initialise with correct selector, for example (for slick carousel):

$().fancybox({
  selector : '.slick-slide:not(.slick-cloned)',
  hash     : false
});

Demo - https://codepen.io/fancyapps/pen/pdbrjx

[ghost]

@fancyapps Your demo doesn't work for all cases:

• You don't see a cloned slide for more than a split second because of the slidesToScroll setting being the same as slidesToShow (it swaps the cloned out for the real ones after the animation is complete).
• If you could, then having fancybox not run on the cloned slides would mean you couldn't open those slides in the lightbox. In your demo, you still have data-fancybox on the cloned slides so those will have the default behaviour and open with duplicates.

@asaage For slick carousel try something like this as an alternative: https://codepen.io/anon/pen/RYWbVY

We use the slick 'init' event to

• Remove the data-fancybox attribute from the cloned slides
• Add a data-trigger attribute with the same value as the data-fancybox that was removed
• Do a little math to work out the original slide index from the cloned slide and set data-index so that FancyBox opens the correct slide when clicking on cloned slides.

[fancyapps]

Hmm, what a bummber... Yes, @f4w-pwharton, you are right, clicking cloned items would display all items :/

Your demo inspired me to create a more complete solution - https://codepen.io/fancyapps/pen/jvbEgo?editors=1010 - the idea is that clicking clones would trigger click event on corresponding original item. Although, this will work only with the upcoming (v3.4) version (should be released tomorrow).

[sermalefico]

Could you help me to get this working with the Swiper JS library. I have the same problem with duplicate slides and can't find a way to make it work.

[fancyapps]

It would be similarly to this - https://fancyapps.com/fancybox/3/docs/#faq-6 But, to overcome this issue properly, this project will be split into 3 parts, see Combine & Customize section here https://fancyapps.com/next/