links failed during the first seconds of the animation

[jairusgit]

Hello,

I am doing two galleries with 5 items and autoplay using your awesome work. I've bought and saw your video but I still have a problem:

If I click on the control button for the 2nd image before it appears on the animation (5 seconds), it shows a blank div, if then I click in the first control button, everything works fine.
This happens for the rest of the images if I click on the control button before its delay-animation.
Do you know if there is a way to solve this?

Please let me know if you need more info, the webpage is http://95.85.58.103/jardineriacanizo/index.php

Thanks in advance,
Jairo García

[benschwarz]

Hmm, because you've got two instances of gallery on the one page, it looks to me like the hash urls are taking over when you interact with both galleries (one after the other…), this is a total limitation of using a hash url to drive the image gallery.

I wasn't able to see the blank div issue that you mentioned… is that still an issue for you?

[jairusgit]

Hi, I've found a mistake on my adaptation of your animation a few days ago. I don´t use Saas for the moment (because I need time to learn it and don´t have it) so i try to simplify the CSS code by doing:

.gallery .control-operator:nth-of-type(1):target ~ .item:nth-of-type(1),
.gallery .control-operator:nth-of-type(2):target ~ .item:nth-of-type(2),
.gallery .control-operator:nth-of-type(3):target ~ .item:nth-of-type(3),
.gallery .control-operator:nth-of-type(4):target ~ .item:nth-of-type(4),
.gallery .control-operator:nth-of-type(5):target ~ .item:nth-of-type(5) {
pointer-events: auto;
opacity: 1;
}

instead of:

.gallery .control-operator:nth-of-type(1):target ~ .item:nth-of-type(1) {
pointer-events: auto;
opacity: 1;
}
.gallery .control-operator:nth-of-type(2):target ~ .item:nth-of-type(2) {
pointer-events: auto;
opacity: 1;
}
.gallery .control-operator:nth-of-type(3):target ~ .item:nth-of-type(3) {
pointer-events: auto;
opacity: 1;
}
.gallery .control-operator:nth-of-type(4):target ~ .item:nth-of-type(4) {
pointer-events: auto;
opacity: 1;
}
.gallery .control-operator:nth-of-type(5):target ~ .item:nth-of-type(5) {
pointer-events: auto;
opacity: 1;
}

But apparently this cause the blank div issue, so I made the animation as your example and solve the problem.
Thanks for your answer.

[nurupo]

Sounds like this issue could be closed now.

[benschwarz]

Thanks @nurupo