Question

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

图库位于左侧，加载的图像被强制显示在屏幕的右侧。它也比它应该大得多。这是我使用的代码。

链接

<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图片Aren正确加载

1 个答案: