FancyBox ne fonctionne pas du tout

Question

J'ai des problèmes pour lancer fancybox - je suis aussi en train d'utiliser quelques autres jquery. Voici les scripts en cours d'exécution.

<!-- latest jQuery direct from google's CDN --> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> 
</script> 

<!-- the mousewheel plugin - optional to provide mousewheel support --> 
<script type="text/javascript" src="../js/jquery.mousewheel.js"></script> 

<!-- the jScrollPane script --> 
<script type="text/javascript" src="../js/jquery.jscrollpane.min.js"></script> 

<!-- EasySlider --> 
<script type="text/javascript" src="../js/easySlider.js"></script> 

<!-- fancybox --> 
<script type="text/javascript" src="../js/fancybox/jquery.fancybox-1.3.2.pack.js"></script> 

<!-- fancybox transitions --> 
<script type="text/javascript" src="../js/fancybox/jquery.easing-1.3.pack.js"></script> 

<script> 
$(function() 
{ 
    $('.scroll-pane').jScrollPane(); 
}); 

</script> 

<script> 
$(document).ready(function(){ 
    $("#slider").easySlider({ 
     auto: true, 
     continuous: true 
    }); 
}); 

</script> 

<script> 
$(document).ready(function(){ 
    $("a#fancy").fancybox({ 
     'transitionIn' : 'elastic', 
     'transitionOut' : 'elastic', 
     'speedIn'  : 600, 
     'speedOut'  : 200, 
     'overlayShow' : false 
    }); 


}); 
</script> 

Et c'est la div qui n'est pas (actuellement) affectée.

<div class="bodytext" style="position:absolute; left:457px; top:911px; width:468px; height:23px;"> 
<a id="a#fancy" href="../katie/studies/1_explorer/explorer_01.png">1</a> 
&bull; 
<a id="a#fancy" href="../katie/studies/1_explorer/explorer_02.jpg">2</a> 
&bull; 
<a id="a#fancy" href="../katie/studies/1_explorer/explorer_03.jpg">3</a> 
</div> 

Vous ne savez pas ce qui se passe car tous les autres scripts fonctionnent correctement. Bravo pour toute aide. Il est probablement quelque chose de simple que je donne sur:]

Answer 1

$(document).ready(function(){ 
    $("a#fancy").fancybox({ 
     'transitionIn' : 'elastic', 
     'transitionOut' : 'elastic', 
     'speedIn'  : 600, 
     'speedOut'  : 200, 
     'overlayShow' : false 
    }); 


}); 

c'est un élément référait avec ID « fantaisie », pas « une fantaisie # ». Vous pouvez donc modifier l'ID de votre balise "a" ou utiliser la balise "a" à la place de l'identifiant, comme indiqué ci-dessous.

$(document).ready(function(){ 
    $("a.fancy").fancybox({ 
     'transitionIn' : 'elastic', 
     'transitionOut' : 'elastic', 
     'speedIn'  : 600, 
     'speedOut'  : 200, 
     'overlayShow' : false 
    }); 
}); 

et html

<div class="bodytext" style="position:absolute; left:457px; top:911px; width:468px; height:23px;"> 
<a class="fancy" href="../katie/studies/1_explorer/explorer_01.png">1</a> 
&bull; 
<a class="fancy" href="../katie/studies/1_explorer/explorer_02.jpg">2</a> 
&bull; 
<a class="fancy" href="../katie/studies/1_explorer/explorer_03.jpg">3</a> 
</div> 

Answer 2

a fait référence à la balise html où la fantaisie est la balise réelle de l'élément que vous essayez de sélectionner.