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
I would like to minimize the visual appearance of the navigation arrows on the fancybox slideshow. At the moment I am trying to eliminate the box around the arrows. The settings for the UI background color for the slideshow do not seem to have any effect on the boxes around the arrows. Is there a way to make the boxes around the arrows transparent?
Thanks.
Offline
Custom CSS, I guess. The problem is, without the box, the white arrows would disappear against high-key images. The box ensures their visibility.
Offline
I would like to get rid of the navigation arrows all together when displayed in vertical position on a smart phone, since they overlap every image and just look annoying to me. I mean every smart phone and tablet user knows by now, that you can just swipe through a series of pictures, I think there is no need to display the arrows on those devices?
Also, I would like the slideshow to start as soon as I click on a thumbnail and it opens the fancybox. Right now it seems to me that I always have to hit the play button manually. I would rather have it start automatically and have the user hit the stop button, if they want to.
Last thing: What does the
Downloads-> Source
do? I thought setting it to "disabled" hinders a user from downloading the large image, but that is not the case. A bit more insight on that would be appreciated.
Offline
Re: Downloads
http://backlight.theturninggate.net/doc … _downloads
Offline
I would like to get rid of the navigation arrows all together when displayed in vertical position on a smart phone
Try putting this in an appropriate media query:
.fancybox-navigation {
display: none;
}Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline
Rod,
For my own knowledge (and possible use) - where or how do you use this CSS so it is enabled when the user device is a phone or tablet but not when the user device is a computer?
Thanks.
Offline
on enabling and using custom css: http://backlight.theturninggate.net/doc … tylesheets
on media queries: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
I generally just use max-width and set it for the width of devices I'm targeting. An ipad in landscape is 1024px wide, for instance.
One reason I like doing this is that it works and I can also more easily test it on the desktop by just changing the width of the browser window
But if you want to target actual devices, use device-width to limit it to the actual width of a device
https://css-tricks.com/snippets/css/med … d-devices/
Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline
Of course, let it be known that enacting styling rules based on screen width does not guarantee the device will have gesture support. I strongly advise against hiding your navigation. Or that your user will have the physical faculties necessary to use gestures, even if the device supports them.
Offline
Pages: 1