fancybox zeigt keine Bilder an, wenn der Bildschirm kleiner ist

Die Fancybox löst aus und zeigt die Bilder an, wenn der Bildschirm so groß ist, bis Sie die Größe unter ca. 1000px ändern. Was habe ich falsch gemacht? Kann jemand helfen? A live page with a test is here, nur die oberen 6 Bilder in der Zeile unter, wo es heißt Bitte, klicken Sie auf die Logos, um einige Testimonial Briefe lesen Code sind mit der Fancybox. Das Zeug unten ist Füllstoff für jetzt.fancybox zeigt keine Bilder an, wenn der Bildschirm kleiner ist

<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>

Quelle

2017-10-28 mlegg

Zuerst beheben Sie alle Fehler JS, weil jeder JS Fehler die weitere Ausführung des Codes verhindern:

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

Quelle

2017-10-29 08:47:14 Janis

wie würde ich das tun? Es tut mir leid, ich weiß nicht, wo ich anfangen soll – mlegg

fancybox zeigt keine Bilder an, wenn der Bildschirm kleiner ist

Antwort

Verwandte Themen