FancyBox 图片加载不正确

Question

我正在结合使用 Masonry 和 Fancybox 插件来创建照片库，但 FancyBox 加载的图像显示不正确。他们被迫在屏幕的右侧，并且占用了太多 space。我还应该注意到，白色边框和箭头按钮都没有出现，而且您无法通过在图像外部单击来关闭图像。这是我页面的屏幕截图。

图库在左边，加载的图片被强制到屏幕的右边。它也比它应该的大得多。这是我正在使用的代码。

链接

<link href="css/styles_desktop.css" type="text/css" rel="stylesheet" />
<link href="fancyapps-fancyBox-18d1712/source/jquery.fancybox.css" type="text/css" />
<link href="fancyapps-fancyBox-18d1712/source/helpers/jquery.fancybox-buttons.css" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="js/masonry.pkgd.min.js" type="text/javascript"></script>
<script src="fancyapps-fancyBox-18d1712/source/jquery.fancybox.pack.js" type="text/javascript"></script>
<script src="fancyapps-fancyBox-18d1712/source/helpers/jquery.fancybox-buttons.js"></script>

CSS

div#gallery {
    width: 990px;
    margin: 10px auto;
}

.item {
    width: 330px;
    display: inline-block;
}

jQuery

    <script>
        $(document).ready(function () {
            $(".fancybox").fancybox();
            $('#gallery').masonry({
                columnWidth: 330, itemSelector: '.item'
            }).imagesLoaded(function () {
                $("#gallery").masonry('reload');
            });
        });
    </script>

HTML

<div id="gallery">
    <a class="fancybox" rel="group" href="other/edits/DSC00232.jpg">
        <img class="item" src="other/edits/DSC00232.jpg">
    </a>
    <a class="fancybox" rel="group" href="other/edits/DSC00274.jpg">
        <img class="item" src="other/edits/DSC00274.jpg"> 
    </a>
    <a class="fancybox" rel="group" href="other/edits/DSC00257.jpg">
        <img class="item" src="other/edits/DSC00257.jpg"> 
    </a>
    <a class="fancybox" rel="group" href="other/edits/DSC00293.jpg">
        <img class="item" src="other/edits/DSC00293.jpg"> 
    </a>
    <a class="fancybox" rel="group" href="other/edits/DSC00235.jpg">
        <img class="item" src="other/edits/DSC00235.jpg">
    </a>
    <a class="fancybox" rel="group" href="other/edits/DSC00236.jpg">
        <img class="item" src="other/edits/DSC00236.jpg">
    </a>
</div>

Answer 1

jquery.fancybox.css 文件未正确加载到您的站点中。请复制 jquery.fancybox.css 中的所有样式并插入到 style.descktop.css 文件中。它会工作正常。似乎这是一个问题。

FancyBox 图片加载不正确

FancyBox Images Aren't Loading Correctly

html

css

jquery

fancybox

masonry