show slider with original styling in Lightbox

Your Account / Forums / Easy FancyBox Pro / show slider with original styling in Lightbox

  • Author
    • December 16, 2014 at 12:16 pm #4176

      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:
      (password: meta)

      Thank you,
      Best regards

    • December 16, 2014 at 12:16 pm #4188

      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 and set Easy FancyBox as not to be upgraded to prevent your changes from being overwritten.

      Hope that helps 🙂

    • December 16, 2014 at 12:16 pm #4189

      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:
      password: meta


    • December 16, 2014 at 12:16 pm #4204

      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:
      password: meta

      Thank you!!

    • December 16, 2014 at 12:16 pm #4227

      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 🙂

    • December 16, 2014 at 12:16 pm #4228

      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…

    • December 16, 2014 at 12:16 pm #4266

      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…

    • December 16, 2014 at 12:16 pm #4275

      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.

    • December 16, 2014 at 12:16 pm #4280

      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.

    • December 16, 2014 at 12:16 pm #4281

      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 (just mention the thread)

    • December 16, 2014 at 12:16 pm #4311

      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.