FancyBox圖像未正確加載

我正在使用砌體和Fancybox插件的組合來創建照片庫，但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>

來源

2016-11-18 Jordan U.

你可以創建一個小提琴嗎？ – vel

我可以嘗試製作一個，但我無法使圖像工作。 –

下面是該網站的鏈接，我無法讓小提琴正常工作。 http://jordanwebdesign.x10host.com/renovation/gallery.html –

jquery.fancybox.css文件未正確加載到您的網站中。請複製jquery.fancybox.css中的所有樣式並插入到style.descktop.css文件中。它會正常工作。似乎這是一個問題。

來源

2016-11-20 13:33:14 vel

謝謝。我剛剛通過並重新鏈接了該鏈接，並立即生效。 –

FancyBox圖像未正確加載

回答

相關問題