Navigation Arrows on Lightbox Images

Home Forums Easy FancyBox Pro Navigation Arrows on Lightbox Images

This topic contains 7 replies, has 2 voices, and was last updated by  cynthia 3 years, 1 month ago.

  • Author
    Posts
  • #3832

    cynthia
    Participant

    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!

  • #3834

    RavanH
    Keymaster

    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
    }
    
  • #3835

    RavanH
    Keymaster

    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.

  • #3836

    RavanH
    Keymaster

    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…

  • #3845

    cynthia
    Participant

    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!

  • #3846

    RavanH
    Keymaster

    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.

  • #3847

    RavanH
    Keymaster

    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.

  • #3848

    cynthia
    Participant

    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.

Site by Pharéo | Hosted on The Permanently Moving Network