画面が小さいときにfancyboxが画像を表示しない

fancyboxは、ワイドスクリーンのときに画像をトリガして表示し、約1000pxの幅でサイズを変更するまで表示します。私は何を間違えたのですか？助けてもらえますか？ A live page with a test is hereは、「Please、Click」の下にある行の上の6つの画像のみを表示します。「読むためのロゴ」は、fancyboxのコードです。以下のものは今のところ充てん剤です。画面が小さいときに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エラーがコードのさらなる実行を防ぐことができるので、すべてのエラーをJS修正：

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

出典

2017-10-29 08:47:14 Janis

私はそれをどのように行うのでしょうか？すみません、どこから始めるべきかわかりません – mlegg

画面が小さいときにfancyboxが画像を表示しない

答えて

関連する問題