Support community for TTG plugins and products.
NOTICE
The Turning Gate's Community has moved to a new home, at https://discourse.theturninggate.net.
This forum is now closed, and exists here as a read-only archive.
You are not logged in.
Pages: 1
Hi, in desktop view, the fancybox navigation arrows are disappearing after a few seconds. What is the right css code to make them always visible like in mobile view?
Rainer
Offline
Maybe something like this:
.fancybox-navigation .fancybox-button--arrow_right,
.fancybox-navigation .fancybox-button--arrow_left
{
opacity: 1;
visibility: visible;
}Daniel Leu | Photography
DanielLeu.com
My digital playground (eg, Backlight tips&tricks): lab.DanielLeu.com
Offline
Is there a CSS code to also make them disappear in mobile view after a few seconds? That would be nice, since they cover up way too much of the images.
Offline
Does not work. After a few seconds the arrows disappear.
Rainer
Last edited by Rainer Goergen (2019-10-02 04:20:46)
Offline
The fade in/ out may then be in the Fancybox script
Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline
Hallo Rainer,
Do you have a gallery where we can see that's it is not working? This way we can better debug it. Thanks!
Daniel Leu | Photography
DanielLeu.com
My digital playground (eg, Backlight tips&tricks): lab.DanielLeu.com
Offline
The code you have written is in basic css file. I checked this in aspect.app.
In all galleries the arrows disappear in fancybox.
On mobile devices all arrows are always visible, until you click onto the image.
I have tested your css code additionally in my custom css file.
I have checked also fancybox.php.
Rainer
Last edited by Rainer Goergen (2019-10-02 08:31:18)
Offline
Sorry, if you don't have a link I can look at I can't help.
Daniel Leu | Photography
DanielLeu.com
My digital playground (eg, Backlight tips&tricks): lab.DanielLeu.com
Offline
Offline
Sorry, I don't see the css I proposed.
Daniel Leu | Photography
DanielLeu.com
My digital playground (eg, Backlight tips&tricks): lab.DanielLeu.com
Offline
I don't see it either. It looks like you haven't included it in your custom css file (pangolin-iconic.css)
Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline
Now I have it included again at the end.
But if it isn't include the custom css, this code is integrated in backlight, if you use inspector and mark an navigation arrow.
Please have now a look again.
Rainer
Last edited by Rainer Goergen (2019-10-02 14:48:34)
Offline
is there still a problem? I just looked and the arrows are not fading out. That's what you wanted, correct?
Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline
Yes, I am now at my Mac. This seems to be a problem in Safari browser.
In Firefox, the arrows are were visible for some minutes. After a few tests with css and undo the changes, same like in Safari. In Safari they disappear always with the other buttons top right.
???
Rainer
Edit:
Is there also a solution that, if I click beside the image, that the image stays on the screen and will not close?
Last edited by Rainer Goergen (2019-10-02 22:51:41)
Offline
Works for me on both Chrome and Safari on my Mac.
Daniel Leu | Photography
DanielLeu.com
My digital playground (eg, Backlight tips&tricks): lab.DanielLeu.com
Offline
I am trying this since 3 hours. With my iPhone the arrows are always visible. On iPad with desktop site - no chance.
I tried everything.
Rainer
P.S.: On your website they disappear too.
Edit:
Now I have taken my Macbook Pro with Sierra.
Firefox and Safari worked.
But why not my MacPro with High Sierra and my iPad Pro 2018 with iPad OS 13.12 not?
Rainer
Last edited by Rainer Goergen (2019-10-03 03:20:16)
Offline
P.S.: On your website they disappear too.
That's how they are supposed to work on MY website.
Daniel Leu | Photography
DanielLeu.com
My digital playground (eg, Backlight tips&tricks): lab.DanielLeu.com
Offline
Offline
Sorry, I don't have an iPad. But you might try
.fancybox-navigation .fancybox-button--arrow_right,
.fancybox-navigation .fancybox-button--arrow_left
{
opacity: 1 !important;
visibility: visible !important;
}Daniel Leu | Photography
DanielLeu.com
My digital playground (eg, Backlight tips&tricks): lab.DanielLeu.com
Offline
Thank you - now - without your code, on PC and Mac the arrows are always visible. Maybe there was an internet cache too.
iPad - I don't know. I try your code too.
Thanks, Rainer
Offline
I tried all this for hours. The !important code is not needed. On PC, Mac and iPhone this all works well.
But the changes are not visible on iPad Pro, they have no effect. Also changes in the album template
under - presentation -.
When I change the colors, there is no effect on iPad. On iPhone there is no problem.
In my pangolin_iconic.css I have a @media code at the end. This works well on iPhone.
If I delete the @media code, there is no effect on the iPad. On Mac, I will check it later in the day.
Rainer
Last edited by Rainer Goergen (2019-10-05 17:21:42)
Offline
Have you tried:
Clearing browser cache in Safari?
Other browsers on iPad?
Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline
Error found - see my other posting. - */ - was in the wrong line of my custom css. Little error, but max. effect.
Rainer
Last edited by Rainer Goergen (2019-10-06 19:01:44)
Offline
Pages: 1