FancyBox在浏览器/屏幕之外打开
我正在编写一个页面，在这个页面中，当用户单击缩略图时，我想为用户打开几组不同的图片，并在FancyBox中这样做。
我或多或少地让它工作，但有一个主要的问题-所有的图像(1680x1050，PNG)打开在一个离屏位置，似乎他们的顶部和左边的值被设定为-80%和75%的屏幕本身，分别。
翻译:我只看到图片的左下角(最多是在打开的时候)。
我已经与谷歌做了大量的搜索，所以，GitHub ( FB项目的源代码)，等等，还没有找到解决方案，甚至是任何遇到同样问题的人。
我可能错过了一些显而易见的东西，或者至少对经验丰富的老兵来说是显而易见的，但我有点新，有点累。有人有什么想法吗？
根据JFK的建议，我已经把我认为是所有相关代码的东西都放在了一个小提琴手里(这是我听说过但从未见过的东西，更不用说使用了)。在这里可以找到：
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;
}回答 2
Stack Overflow用户
发布于 2015-01-05 23:59:28
结果，我错过了一些显而易见的东西，我没有包括所有相关的代码让任何人帮助我(新手错误)，并且没有注意到Chrome元素检查器中的那个小小的红色X。
我找到了FancyBox的样式表错误的路径。仅此而已。
Stack Overflow用户
发布于 2015-01-05 08:55:31
据我所见，当元素相对于屏幕定位75%时，这是预期的行为。只有在其余的25%的屏幕上，元素将是可见的，其余的将在视口之外。
尝试如下：(在本例中，我使用的元素宽度和高度为800 an )。
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由于您没有为我们提供任何代码，我不确定上面的解决方案是否适合您，但这与将绝对定位元素与父元素对齐是一样的。
干杯，杰伦。
https://stackoverflow.com/questions/27775697
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号