Question

fancybox会在宽屏幕上触发并显示图像，直到您在大约1000px宽度下调整大小。我做错了什么？有人可以帮忙吗？一个live page with a test is here，只有行中的前6个图像所示，请点击标识阅读一些推荐信是带有fancybox的代码。下面的东西现在是填充物。

<link rel="stylesheet" type="text/css" href="jquery.fancybox.min.css"> 
<=== the above is in the <head> ===>

<div class="row">
  <div class="col-lg-2 col-sm-3 col-xs-4"><a class="thumbnail fancybox" data-fancybox="images" href="ltrs/tucscenter.htm">
                       <div class="img-fixed">
                        <img class="img-fluid" alt="Tuscon Center" src="photos/logo/tuscenter.jpg" /> </div>
                     </a></div>
   <div class="col-lg-2 col-sm-3 col-xs-4"><a class="thumbnail fancybox" data-fancybox="images" href="ltrs/texasdot.htm">
                       <div class="img-fixed">
                        <img class="img-fluid" alt="Texas DOT" src="photos/logo/TexasLogo.jpg" /> </div>
                     </a></div>
   <div class="col-lg-2 col-sm-3 col-xs-4"><a class="thumbnail fancybox" data-fancybox="images" href="ltrs/ushome.htm">
                       <div class="img-fixed">
                        <img class="img-fluid" alt="Tuscon Center" src="photos/logo/USHomeLogo.jpg" /> </div>
                     </a></div> 
    <div class="col-lg-2 col-sm-3 col-xs-4"><a class="thumbnail fancybox" data-fancybox="images" href="ltrs/kimberly.htm">
                       <div class="img-fixed">
                        <img class="img-fluid" alt="Kimberly Clark" src="photos/logo/KimberlyClarkLogo.jpg" /> </div>
                     </a></div>
    <div class="col-lg-2 col-sm-3 col-xs-4"><a class="thumbnail fancybox" data-fancybox="images" href="ltrs/FresnoCollege.htm">
                       <div class="img-fixed">
                        <img class="img-fluid" alt="Fresno College" src="photos/logo/FresnoCollege.jpg" /> </div>
                     </a></div> 
    <div class="col-lg-2 col-sm-3 col-xs-4"><a class="thumbnail fancybox" data-fancybox="images" href="ltrs/roswelltoy.htm">
                       <div class="img-fixed">
                        <img class="img-fluid" alt="Tuscon Center" src="photos/logo/roswelltoyota.jpg" /> </div>
                     </a></div>
     </div>
<div class="clearfix d-none d-sm-block"></div>

<=== above </body> close ===>
<script src="jquery.fancybox.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$(".fancybox").fancybox();
	});
</script>

Answer 1

首先，修复所有JS错误，因为任何JS错误都可能阻止进一步执行代码：

Uncaught TypeError: $(...).collapse is not a function

当屏幕较小时，fancybox不显示图像

1 个答案: