问题
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.
回答1:
try the margin API option
$(".fancybox").fancybox({
margin: [120, 60, 20, 60] // top, right, bottom, left
});
See JSFIDDLE
来源：https://stackoverflow.com/questions/18421351/increase-top-and-bottom-margin-fancybox-v2-because-of-fixed-navigation