Navigation Arrows on Lightbox Images

Your Account / Forums / Easy FancyBox Pro / Navigation Arrows on Lightbox Images

  • Author
    Posts
    • Anonymous
      October 17, 2014 at 12:56 am #3832

      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!

    • October 17, 2014 at 12:56 am #3834

      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
      }
      
    • October 17, 2014 at 12:56 am #3835

      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.

    • October 17, 2014 at 12:56 am #3836

      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…

    • Anonymous
      October 17, 2014 at 12:56 am #3845

      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!

    • October 17, 2014 at 12:56 am #3846

      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.

    • October 17, 2014 at 12:56 am #3847

      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.

    • Anonymous
      October 17, 2014 at 12:56 am #3848

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

  • You must be logged in to reply to this topic.