Navigation Arrows on Lightbox Images

[cynthia]

Hi There,
I have installed Easyfancy box pro on this site: http://www.rowdystory.com/neat-old-stuff/
Pardon me if this is obvious, but I can’t figure out how to make the navigation arrows stay visible. They pop up only if you mouse over just the right area and then they disappear again. I would like them to stay visible the whole time.
Thank you for any help!

[RavanH]

Hi Cynthia, that is actually a good idea to implement as an option. Until then, you can make it happen by placing this CSS rule in your themes style.css stylesheet:

#fancybox-right span {
	left: auto;
	right: 20px;
}
.rtl #fancybox-left span {
	right:20px
}
#fancybox-right span {
	left: auto;
	right: 20px;
}
.rtl #fancybox-right span {
	right:auto;
	left:20px
}

[RavanH]

Tip: if you don’t have the possibility to or do not want to edit your themes stylesheet (because you are not using a custom or child theme) then you can use Jetpack’s module “Custom CSS” to append these rules via the WordPress admin.

[RavanH]

Looking at your site again, I notice it’s the Divi theme. You have an option to append style rules in the theme settings which you already used for another FancyBox-related style rule:

#fancybox-wrap div {top:30px !important;}

Did you add that rule to place the title at the top? Then better to change it to:

#fancybox-title { top:10px; bottom: auto !important }

And maybe add:

#main-header { z-index: 9999 }

to make the menu fall behind the lightbox overlay, frame and images…

[cynthia]

Thank you! This is close. Now Right arrow stays visible but won’t navigate. Left arrow has disappeared. Would like both to stay visible and navigate. Many thanks!

[RavanH]

Hi Cynthia, yes very close… just a few tweaks because I made some type-o’s:

1. The first part:

#fancybox-right span {
	left: auto;
	right: 20px;
}
...

needs to become:

#fancybox-left span {
left: 20px;
}
...

should make the left arrow show as well.

2. Missing the “t” in “!important”:

#fancybox-title {
top: 10px;
bottom: auto !important;
}

which should fix the title wrapper div covering the navigation arrow divs.

[RavanH]

Tip: if you want to move the arrows to the side so they do not cover the image while visible, then replace all the 20px values with -15px (that’s minus fifteen pixels). This will make the right arrow align with the close button on the right and the left arrow will take a matching opposite position.

[cynthia]

Thank you, that is great! Works like a charm. Sorry I couldn’t catch the typos myself!

[Author]

Posts