show slider with original styling in Lightbox

Home Forums Easy FancyBox Pro show slider with original styling in Lightbox

This topic contains 10 replies, has 2 voices, and was last updated by  ingmar 2 years, 11 months ago.

  • Author
    Posts
  • #4176

    ingmar
    Participant

    Hello,
    I have a small slider (metaslider), which upon clicking on an image, should appear bigger in a lightbox. No problem, but I would like to include the design of the small slider, in the big slider as well! (arrows, navigation), including the text ‘click on image to close’ below it, which it should do as well.
    In all FAQ etc. I didn’t find the right approach to this issue… help would be great.

    This is ho it looks so far: http://www.ingmarcramers.de/wordpress/portfolio/garderobe/
    (password: meta)

    Thank you,
    Best regards
    Ingmar

  • #4188

    RavanH
    Keymaster

    Hi Ingmar, to change the icons used for close and forward/back buttons, you would need to modify/replace the file easy-fancybox/fancybox/fancybox.png which you can do with the excellent free image manipulation software GIMP.

    To get the text “click image to close” below the lightbox, you could give the links this as title attribute. It depends on the slider plugin if this is possible at all… If not, then you would need to modify the easy-fancybox-settings.php file. Open it up in the WordPress Plugins Editor and find these lines about 1/3 down:

    
    		'IMG' => array(
    			'title' => __('Images','easy-fancybox'),
    			'input' => 'multiple',
    			'options' => array(
    

    now insert these new lines right after that opening bracket:

    
    				'title' => array (
    					'default' => 'Click image to close.'
    					),
    

    Next, install the plugin https://wordpress.org/plugins/block-specific-plugin-updates/ and set Easy FancyBox as not to be upgraded to prevent your changes from being overwritten.

    Hope that helps 🙂

  • #4189

    ingmar
    Participant

    Hello RavanH, thank you for your reply.

    adapting the forward/back buttons will be no problem, I found the files you suggested.
    to get ‘click image to close’ below the lightbox I followed your suggestion. I copied the code you send (which seems a good option) exactly where you said, but nothing shows!
    What am I doing wrong?

    And at the very bottom of the lightbox, there are two thin black lines, as wide as the field that the forward/back arrows are active. How do I delete those?

    The url again: http://www.ingmarcramers.de/wordpress/portfolio/garderobe
    password: meta

    Thanks!

  • #4204

    ingmar
    Participant

    I fixed the title issue, now the only small problem I still have are the thin black lines at the bottom of the lightbox.
    If I uncheck the arrows in the setting menu, the lines are gone as well… but I want arrows.
    border thickness doesn’t help either, the lines are always below the border.
    do you have a clue what it is and how it can be fixed?

    The url again: http://www.ingmarcramers.de/wordpress/portfolio/garderobe
    password: meta

    Thank you!!

  • #4227

    RavanH
    Keymaster

    Ah… now I finally see where those thin lines are coming from. There is a rule a { border-bottom: solid 1px rgba(0,0,0,.5); } in your themes compressed-styles.css which also applies to the FancyBox back/forward arrow zones.

    A rule like

    
    a#fancybox-left, a#fancybox-right { border-bottom: none; }
    

    should solve it 🙂

  • #4228

    RavanH
    Keymaster

    For the “click image to close” text to show, you need to do two more things:
    1. Go to Settings > Media and activate the Show Title option (and I suggest Position: Inside) and
    2. Refresh the source compression / caching (from the theme?) that seems to be going on on your site…

  • #4266

    ingmar
    Participant

    Thank you, it all worked fine!

    Along the way, one small question appeared… In my fancybox settings I chose 800 width, 600 height, 5 border. Can I make that a max-width and max-height for all fancybox on the site?

    I am using a small (meta)slider that opens larger in a fancybox, therefore I don’t have a html-link in which I could place some heigth and width parameters…

  • #4275

    RavanH
    Keymaster

    Hi Ingmar, the lightbox was built to scale to the original image size with only the browser viewport (with a certain margin) as limit. However, you would try adding the following CSS to your themes stylesheet:

    
    #fancybox-wrap div {
    max-width: 600px;
    height: auto !important;
    }
    

    Note: Setting a max-width and a max-height together might scale larger images out of their original proportions to force-fit them into these max sizes.

  • #4280

    ingmar
    Participant

    I need to set both a max height and max width, so you are right, this messes up the proportions.

    If I upload images that are simply not bigger than 800×600, I noticed Fancybox doesn’t make them bigger than that, even if the browser viewport is bigger. This would be a simple solution to it all… if not…
    I want to make the site retina-proof, so I want to upload 1600×1200 images, that are never displayed bigger than 800×600. Is there a way, to simply set the max display width and height of ALL images on my website to 800×600?

    Thank you very much.

  • #4281

    RavanH
    Keymaster

    Hi Ingmar, I suppose that if you make sure all these images are 1600×1200 then you can set both max-width and max-height and then maybe try setting both width and height to auto like:

    
    #fancybox-wrap div {
    max-width: 800px;
    max-height: 600px;
    width: auto !important;
    height: auto !important;
    }
    

    Not sure if this is going to work though, so to be tested on different screen sizes.

    If you’ve set this up on your site and you want me to take a look, you can send the new password via https://premium.status301.net/contact/ (just mention the thread)

  • #4311

    ingmar
    Participant

    Hello Ravanh,
    It seems hard to make max width work well for fancybox. unfortunately I don’t have a lot of time left so I chose a different plugin in, which works, so the thread is resolved. Thank you for all the help and support.

You must be logged in to reply to this topic.

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