1

When I click on one of my thumbnails, fancybox loads and opens, but the index of my gallery stands halfway on my page. At the very down of my website I get the icons of fancybox, the size of the full width of my screen, followed by enlarged thumbnails and picture at that index.

This is the code I'm using:

$(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>
    //...

example of one of the icons on my screen

halfer
  • 19,824
  • 17
  • 99
  • 186
offline
  • 11
  • 1

1 Answers1

0

Issues like this means that CSS file is not loaded correctly. In your case, you forgot to add type="text/css" to CSS file link.

Janis
  • 8,593
  • 1
  • 21
  • 27
  • I have added them where I left them out, but that doesn't seem to fix the problem apparently. – offline Jun 05 '19 at 17:34
  • Did you check if CSS file is now loaded? Do you understand that we can not check that without seeing your live page or demo? – Janis Jun 05 '19 at 18:46
  • The CSS file didn't load. I deleted the CDN link and copied another from the internet. Now it's working correctly. Thank you very much for your help. – offline Jun 05 '19 at 19:41