花式框首先在我的页面图标下加载并疯狂放大

Question

当我点击我的一个缩略图时，fancybox加载并打开，但我的画廊的索引位于我的页面上的一半。在我的网站的最下方，我得到了花式框的图标，屏幕全宽的大小，然后是该索引处的放大缩略图和图片。

这是我正在使用的代码：

$(document).ready(function() {
  $('.fancybox').fancybox();
});

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="CSS/normalize.css" rel="stylesheet" type="text/css">
<link href="CSS/ResponsiveWebsite.css" rel="stylesheet" type="text/css">
<link rel="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="JS/navigatiebalk.js"></script>
<script type="text/javascript" src="JS/Mole-park.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>
//...
<div class="row">
  <div class="col-8 col-l-8 img-container">
    <div>
      <a class="fancybox" data-fancybox="gallery" rel="group1" href="images/antelope.jpg"><img src="images/thumbnails/antelope_tn.jpg" alt="" /></a>
      <a class="fancybox" data-fancybox="gallery" rel="group1" href="images/elephant.jpg"><img src="images/thumbnails/elephant_tn.jpg" alt="" /></a>
    </div>
  </div>
  <aside class="col-4 col-l-4 clearfix">
    <h2>Visiting the park</h2>
    //...

屏幕上的某个图标示例

Answer 1

这样的问题意味着CSS文件未正确加载。在您的情况下，您忘记将type="text/css"添加到CSS文件链接。