fancybox funktioniert nicht wie erwartet

Ich folgte dem Code in diesem jsfiddle und schrieb alles in einer einzigen HTML-Datei.
Was fehlt, da es nicht wie in jsfiddle funktioniert? http://jsfiddle.net/kevin11189/uZCC6/1270/fancybox funktioniert nicht wie erwartet

<!DOCTYPE html> 
<html> 
<head> 
<style> 
    .hidden { 
     display: none; 
    } 
</style> 
</head> 
<body> 
    <a class="fancybox-thumbs" data-fancybox-group="thumb1" href="http://fancyapps.com/fancybox/demo/4_b.jpg"><img src="http://fancyapps.com/fancybox/demo/4_s.jpg" alt="" /></a> 

    <a class="fancybox-thumbs hidden" data-fancybox-group="thumb1" href="http://fancyapps.com/fancybox/demo/3_b.jpg"><img src="http://fancyapps.com/fancybox/demo/3_s.jpg" alt="" /></a> 

    <a class="fancybox-thumbs" data-fancybox-group="thumb2" href="http://fancyapps.com/fancybox/demo/2_b.jpg"><img src="http://fancyapps.com/fancybox/demo/2_s.jpg" alt="" /></a> 

    <a class="fancybox-thumbs hidden" data-fancybox-group="thumb2" href="http://fancyapps.com/fancybox/demo/1_b.jpg"><img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt="" /></a> 

</body> 
<script language="JavaScript"> 

    $('.fancybox-thumbs').fancybox({ 
     prevEffect : 'none', 
     nextEffect : 'none', 

     closeBtn : true, 
     arrows : false, 
     nextClick : true,     

     helpers : { 
      thumbs : { 
       width : 50, 
       height : 50 
      } 
     } 
    }); 

</script> 
</html>

** Gesamt Neuling hier!

Quelle

2016-11-21 Mona Jalal

Ihr Hauptproblem ist, zu Fiddle neu zu sein, von dem, was ich sehen kann ...

Weil Sie geladen, um die externen Ressourcen gesehen hätten.
Fügen Sie diese in der <head> Ihrer HTML-Datei:

<link rel="stylesheet" type="text/css" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css"> 
<link rel="stylesheet" type="text/css" href="http://fancyapps.com/fancybox/source/helpers/jquery.fancybox-thumbs.css"> 
<script src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script> 
<script src="http://fancyapps.com/fancybox/source/helpers/jquery.fancybox-thumbs.js"></script>

und sehen, wie es ist großartig zu arbeiten, wenn alle Libs geladen werden.
;)

EDIT
mmm ...
auch jQuery hinzufügen obendrein ...

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

Ich weiß nicht, warum es in Fiddle Äußerlichkeiten nicht zeigen ...
Aber es ist erforderlich.

2. EDIT
Es sieht aus wie es funktioniert besser mit jQuery 2.2.4 statt jQuery 3.1.1 ...
Die Thumbnails nicht zeigten ...

So fügen Sie stattdessen:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>

Quelle

2016-11-21 23:31:27

fancybox funktioniert nicht wie erwartet

Antwort

Verwandte Themen