Изображения FancyBox загружаются неправильно

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. Это будет работать нормально. Кажется, это проблема.