增加顶部和底部边缘FancyBox v2由于固定导航 [英] Increase top and bottom margin FancyBox v2 because of fixed navigation

问题描述

我目前正在开发一个网站，以后会有反应。该网站主要由图像组成，然后加载到FancyBox当点击。 v2的FancyBox现在响应，所以重新调整大小的图像等当屏幕尺寸改变。作为我的设计的一部分，我有两个固定的横幅出现在页面的顶部和底部，请参见下面的图片：

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:

默认情况下，FancyBox周围有一个边缘，以便它的风格很好。但是，由于我已经添加到横幅的固定位置，我需要增加顶部和底部边距。我通过JS源，但我不能为我的生活找到我应该添加额外的margin。在转换等有各种各样的边距（我认为是我困惑的地方）。

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).

理论上，我只需要将x的像素数量添加到边距，其中x是横幅的高度。作为一个旁白，我不知道我将如何在响应式设计中复制这个，因为横幅可能在手机上略微更浅。添加边距将意味着图像和横幅之间有一个微小的差距，当前的图像在横幅后面。看到下面的图片，看起来像是什么：

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.

提前感谢，Adam。

Thanks in advance, Adam.

推荐答案

尝试 margin API选项

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

请参阅 JSFIDDLE

See JSFIDDLE

这篇关于增加顶部和底部边缘FancyBox v2由于固定导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！