FancyBox 在 browser/screen 之外打开

Question

我正在处理一个页面，其中有几组不同的图像，我想在用户单击缩略图时为他们打开这些图像，并在 FancyBox 中执行此操作。

我或多或少能正常工作，但有一个主要问题 - 所有图像（1680x1050，PNG）都在屏幕外的位置打开，就好像它们的顶部和左侧值是相对于屏幕本身设置的分别为 -80% 和 75%。

翻译：打开时我只能看到图像的左下角（最多）。

我用 Google、SO、GitHub（FB 项目的来源）等进行了大量搜索，但还没有找到解决方案，甚至没有人遇到同样的问题。

我可能遗漏了一些明显的东西，或者至少对经验丰富的老手来说是显而易见的，但我有点新，有点累。有人有什么想法吗？

根据 JFK 的建议，我将我认为是所有相关代码的内容放入 jsfiddle（我听说过，但以前从未见过，更不用说使用了）。可以在这里找到：

http://jsfiddle.net/ericb222/ttvpg8vp/4/

此外，我使用的 jQuery 是：

jquery 2.1.1
jQueryui 1.11.2

如果您需要更多代码，请随时告诉我。我是编程新手；我刚刚完成了专注于 Java 和 SQL 的两年制学位。

/* HTML */

<div id="content">
    <div id="content_body">
        <div id="content_left">
        </div><!--Close of content_left-->
        <div id="content_right">
            <div id="oms" class="content_block_standard">
                <div class="screenshots">

                    <a href="http://www.ejbdev.com/academia/oms/1_Portal.png" class="fancybox fancybox.image" rel="oms_gallery" title="Text"><img class="thumbnail" src="http://www.ejbdev.com/academia/oms/1_Portal.png" /></a>

                    <a href="http://www.ejbdev.com/academia/oms/2_Roster.png" class="fancybox fancybox.image" rel="oms_gallery" title="Text"><img class="thumbnail" src="http://www.ejbdev.com/academia/oms/2_Roster.png" /></a>

                    <a href="http://www.ejbdev.com/academia/oms/3_Add.png" class="fancybox fancybox.image" rel="oms_gallery" title="Text"><img class="thumbnail" src="http://www.ejbdev.com/academia/oms/3_Add.png" /></a>

                </div><!-- /screenshots -->
            </div><!-- /content_block_standard for OMS project -->
        </div><!-- /#content_right -->
    </div><!-- /#content_body -->
</div><!-- /#content -->

/* Javascript (from <head>) */

$(document).ready(function() {
    $('.fancybox').fancybox({
        openEffect  : 'elastic'
    });
});

/* CSS */

div#content {
    /* Positioning */
    margin-left:        auto;
    margin-right:       auto;
    position:           relative;
    top:                4.0em;
    margin-bottom:      16px;
    /* Sizing */
    width:              960px;
    /* Styling */
    border-top:         none;
}
    div#content_body {
        margin:         0;
        padding:        0;
        display:        table;
        position:       relative;
        top:            0px;
        left:           0px;
        height:         100%;
    }
    div#content_left {
        width:          192px;
        height:         100%;
        margin-top:     0;
        display:        table-cell;
        vertical-align: top;
        position:       relative;
        top:            0px;
        left:           0px;
        padding-left:   0.4em;
        padding-right:  0.4em;
    }
    div#content_right {
        width:          768px;
        display:        table-cell;
        vertical-align: top;
        border-radius:  8px;
    }
    div.content_block_standard {
        width:              90%;
        margin-left:        auto;
        margin-right:       auto;
        padding:            1.0em;
    }

div.screenshots {
    text-align:         center;
    margin-left:        auto;
    margin-right:       auto;
    background:         linear-gradient(rgba(0,0,0,0.0),rgba(0,0,0,0.0),rgba(22,122,222,0.2));
    padding:            4px;
}

img.thumbnail {
    width:              128px;
    height:             auto;
}

Answer 1

据我所知，当元素相对于屏幕定位 75% 时，这是预期的行为。只有在剩下的 25% 的屏幕上，该元素才会可见，其余部分将在视口之外。

试试这个：（对于这个例子，我使用 800px 的元素宽度和高度）

left: 50%; // position the left side of the box to be in the exact center
top: 50% // position the top of the box to be in the exact center
margin-left: -400px; // half of the width
margin-top:-400px; // half of the height

由于您没有向我们提供任何代码，我不确定上面的解决方案是否适合您，但这就是将绝对定位元素居中到父元素的程度。

杰伦干杯。

Answer 2

原来，我遗漏了一些明显的东西，我没有包括所有相关代码供任何人帮助我（新手错误), 并且没有注意到 Chrome 的元素检查器中的那个红色小 X。

我把 FancyBox 样式表的路径弄错了。就是这样。

FancyBox 在 browser/screen 之外打开

FancyBox opens outside of browser/screen

html

css

jquery

positioning

fancybox