Navigation Arrows on Lightbox Images

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
}

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.

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…

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.

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.