화면이 작을 때 fancybox가 이미지를 표시하지 않음

fancybox는 약 1000px 아래에서 크기를 조정할 때까지 와이드 스크린 일 때 이미지를 표시하고 표시합니다. 나는 무엇을 잘못 했는가? 누군가 도울 수 있습니까? A live page with a test is here, 아래의 행에있는 상위 6 개 이미지 만 클릭하십시오. 클릭하십시오. 읽는 로고 몇 장의 추천 문구는 fancybox의 코드입니다. 아래 내용은 현재 필러입니다. 어떤 JS 오류 코드의 추가 실행을 방지 할 수 있기 때문에화면이 작을 때 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"> 
 
\t $(document).ready(function() { 
 
\t \t $(".fancybox").fancybox(); 
 
\t }); 
 
</script>

출처

2017-10-28 mlegg

는 먼저, 모든 오류를 JS 수정 :

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

출처

2017-10-29 08:47:14 Janis

내가 그걸 어떻게 할 것인가? 미안해. 어디서부터 시작해야할지 모르겠다. – mlegg

화면이 작을 때 fancybox가 이미지를 표시하지 않음

답변

관련 문제