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

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

干杯，Jeroen。

Answer 2

原来，我错过了一些明显的东西，我不包括所有相关代码供任何人帮助我（新手错误），并且没有注意到在Chrome的Element Inspector中使用那个小红色X.

我找到了FancyBox样式表的错误路径。就是这样。

FancyBox在浏览器/屏幕之外打开

2 个答案: