1

The left and right arrows + the caption on my site's - https://byjohan.se - Fancybox are displayed for 60 seconds and then vanish. I'd like to change this to for example 10 seconds, but I simply cannot find where in the jquery.fancybox.min.css to change that. Ideally I'd also be able do make the horizontal line in the image below invisible, if possible.

Thanks for helping,

//Johan

Example image

Ole V.V.
  • 81,772
  • 15
  • 137
  • 161
SoapB
  • 15
  • 4

1 Answers1

0

Go to your https://byjohan.se/js/jquery.fancybox.js file and update the value "idleTime:10" or to any other value.enter image description here

Nezir
  • 6,727
  • 12
  • 54
  • 78
  • That does it for computers, but every mobile device - except my Note 10.1 - keeps displaying both arrows and text, and does it infinitely. Any way to make it work for mobile as well? If it's possible, I'd like to keep the arrows and just have the horizontal line and the text fade away? Thanks for helping out :) – SoapB Sep 24 '18 at 19:37
  • hmm there are bugs with mobile view here are some try to fix: "Actually, idleTime is disabled on mobile devices by default. Have you enabled it or maybe your phone is not recognized as mobile device?" check this link: https://github.com/fancyapps/fancybox/issues/1871 – Nezir Sep 25 '18 at 05:11
  • It's weird, but adding "share" under: buttons: [ //"zoom", //"share", //"slideShow", //"fullScreen", //"download", //"thumbs", "fullScreen", "share" ], made it work on my Galaxy S8. But the arrows + text still never fades away on iPad or iPhone. And on my Galaxy Note 10.1 (running 5.1.1) it's still, and has always been, fading away after only 2 seconds. – SoapB Sep 26 '18 at 06:20
  • Yes, they're recognized as mobile. I used to resize the page depending on if it was a desktop or mobile device and that worked well... – SoapB Sep 26 '18 at 06:27
  • Anyone know if it's possible to permanently get rid of that white horisontal line? – SoapB Sep 26 '18 at 06:29
  • For removing this white horizontal line just put this class in your css: .fancybox-show-caption .fancybox-caption{ opacity: 0; } – Nezir Sep 26 '18 at 07:25
  • I just put it in the top of the .css-file but I cannot get it to work. Do I have to put it in a particular section of the .css or is it something else I'm doing wrong? And wouldn't it, if it worked, also remove the caption text below the horizontal line? – SoapB Sep 26 '18 at 08:40
  • You just need to put it in css file that is accessible on page, in your case do you have application.css then put there, also if you could add opacity:0 !important; the important switch. Maybe the classes are overridden by original css so with use of !important then it will be primary used. – Nezir Sep 26 '18 at 08:42
  • Adding the important! switch did it. But unfortunately, as I feared, the text of the caption also was removed. I need a way to get rid of the horizontal line while keeping the text intact. Thanks for trying to help, though :) – SoapB Sep 26 '18 at 09:14
  • No problem just add then this class to css .fancybox-caption::after { border-bottom: none; } if not work try add !important again. – Nezir Sep 26 '18 at 10:21
  • That solved it. On all devices but the iPhone the white, horizontal line is gone. And on all of the devices I can test on, except for the iPhone and iPad, the fading works. A few browsers are having problems handling the code - Firefox, Samsung Browser - but all in all it works really, really well now :) Many thanks to you, Nezir :) – SoapB Sep 26 '18 at 15:09
  • I am very glad that this was useful to you can you please accept my answer and vote up, if that is okay for you. @SoapB – Nezir Sep 26 '18 at 15:12
  • If one would want to know how to use code like ".fancybox-caption::after { border-bottom: none; } ", where would one look? – SoapB Sep 26 '18 at 15:14
  • I was actually just looking for a way to give you a vote or a badge or something but couldn't find it. I believe I now gave you a vote, didn't I? – SoapB Sep 26 '18 at 15:16
  • The main source of info about web pace and css class of any elements is browser development tools as you can see at my screenshot above right side. On chrome its F12 key press and then you need to learn how to use the developer tools for finding relevant css class of specific html element. After that you can manipulate in place of css of that element, and if you fix something than just need to write that change somewhere in your css file as you did today. – Nezir Sep 26 '18 at 15:18
  • @SoapB you can click on triangle above where I wrote you my answer and upload the screenshot. Gray triangle above 0 – Nezir Sep 26 '18 at 15:23
  • Here you can see where you can vote and accept answer https://imgur.com/a/2tTVMmL – Nezir Sep 26 '18 at 15:30
  • 1
    It says when I upvote, that votes by people with reputation less than 15 are recorded but won't be seen. So, you got 3 now, but they're invisible since my reputation is less than 15. – SoapB Sep 26 '18 at 15:41
  • Okay thank you and can you accept answer? its about marking correct into green like here: https://i.stack.imgur.com/uqJeW.png – Nezir Sep 26 '18 at 15:43