Когда я нажимаю на одну из моих миниатюр, загружается и открывается fancybox, но индекс моей галереи стоит на полпути на моей странице. В самом низу моего веб-сайта я получаю значки 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> //...
пример одного из значков на моем экране
Подобные проблемы означают, что файл CSS загружен неправильно. В вашем случае вы забыли добавить type="text/css" к ссылке на файл CSS.
type="text/css"