Using titles outside the image means the image is not sized correctly

Forums Easy FancyBox Pro Using titles outside the image means the image is not sized correctly

This topic contains 4 replies, has 2 voices, and was last updated by  jonanwyl 5 years, 2 months ago.

  • Author
  • #3353


    Hi there

    I’d like to use titles outside the image (Outside or Float) instead of Inside or Overlay. But when I set it up that way, the images open at a size that seems to ignore the title. The title is off the bottom of the screen often.
    You can see examples on most pages at, including the home page

    Is there a way to fix this? Obviously the ideal would be for the sizing to take into account the title and size appropriately, but I’d also be able to work with something where I could just size all images at say 90% of what they would have been otherwise.

    And one other related question – is it possible to have different fancyboxes on different pages using different settings? At the moment I think I can only have titles on ALL my fancyboxes set to e.g. Inside. Is it possible to have one set to Overlay and another on another page set to Inside?

    Thanks for your help!

  • #3357



    The title (with position outside, float or inside) really only has space for one line. A second line might just fit but it depends on font sizes, line height and other styling (in your case added padding)…

    There is an unused parameter (called margin) in FancyBox that allows to set a larger margin between the browser and the FancyBox frames. I’ll take this as a feature request for the upcoming Pro version 🙂

    … is it possible to have different fancyboxes on different pages using different settings?

    It is not possible to have different settings per page, but you can specify different parameters per media link. You will need to activate the option ‘Include Metadata jQuery extension’ which allows settings parameters like {titlePosition:over} to the link class. Available parameters and their values can be found on

    In fact, if you can define/add classes for the slider on your homepage, then you could start using a different margin right away. Use something like {margin:60} for more title space…

  • #3356


    Ah thanks – I think I’m almost there but not quite.
    I’ve added a class to the links that open the images from the slider (fb-margin) and I’ve added some jQuery code which runs on every page, but it’s not working. No doubt I’m doing something dumb as I’m a bit of a novice.

    The jQuery I’m using is

    		'margin'	: 60

    Is that what you meant by “setting parameters to the link class”?

    Any tips would be very welcome!


  • #3355


    Hi jon, no I was actually referring to the use of the Metadata extension. You can see an example on under “How do I show content with different sizes?” …

    You will have to do:
    1. Go to Settings > Media and check the option “Include Metadata jQuery extension…”
    2. Change class"fb-margin" that you added to the links to class"fancybox {titlePosition:outside,margin:60}"

    Now you are free to change the default title position to anything other, the slider images will always use Outside and a margin of 60…

    Hope that helps 🙂

  • #3354


    Ah excellent. Works! Thank you. In case this helps anyone else a small typo in the above – you need to set class="fancybox {titlePosition:'outside',margin:60}"

    (Quotes around the outside are necessary)

    Marvellous – opens up all sorts of flexibility 🙂

You must be logged in to reply to this topic.