I'm currently working on a website which in future will be responsive. The site is primarily made up of images which in turn load into a FancyBox when clicked. v2 of FancyBox is now responsive and so re-sizes the images etc when screen size changes. As part of my design I have two fixed banners which appear at the top and bottom of the page, see image below:

By default there is a margin around the FancyBox so that it's styled nicely. However, with the fixed positioning that I've added to the banners I need to increase the top and bottom margin. I've looked through the JS source but I can't for the life of me find where I should be adding extra margin. There are all sorts of margins on the transitions etc (which I think is where I'm getting confused).

In theory I just need to add "x" amount of pixels to the margin, where x is the height of the banners. As an aside I'm not sure how I would replicate this in a responsive design, as the banners may be slightly shallower on a mobile. Adding the margin would mean there's a slight gap between the image and the banner, where currently the image goes behind the banner. See the following image for what I'd like it to look like:

I'd appreciate any thoughts/examples of where this has been done before.

Thanks in advance, Adam.

I'm currently working on a website which in future will be responsive. The site is primarily made up of images which in turn load into a FancyBox when clicked. v2 of FancyBox is now responsive and so re-sizes the images etc when screen size changes. As part of my design I have two fixed banners which appear at the top and bottom of the page, see image below:

By default there is a margin around the FancyBox so that it's styled nicely. However, with the fixed positioning that I've added to the banners I need to increase the top and bottom margin. I've looked through the JS source but I can't for the life of me find where I should be adding extra margin. There are all sorts of margins on the transitions etc (which I think is where I'm getting confused).

In theory I just need to add "x" amount of pixels to the margin, where x is the height of the banners. As an aside I'm not sure how I would replicate this in a responsive design, as the banners may be slightly shallower on a mobile. Adding the margin would mean there's a slight gap between the image and the banner, where currently the image goes behind the banner. See the following image for what I'd like it to look like:

I'd appreciate any thoughts/examples of where this has been done before.

Thanks in advance, Adam.

• javascript
• jquery
• css
• fancybox
• fancybox-2

1 Answer 1

try the margin API option

$(".fancybox").fancybox({
    margin: [120, 60, 20, 60] // top, right, bottom, left
});

See JSFIDDLE