Salut!
J'ai développé un diaporama en jquery qui fonctionne très bien. Je souhaite l'intégrer dans le site... et c'est là que tout se complique !
Dans mon modèle je fais appel au fichier jquery.jDiaporama.js et j'intègre le code suivant directement dans mon modèle en dessous de la balise <atm-meta-tags /> :
Code :
<atm-meta-tags />
<script type="text/javascript">
$(document).ready(function(){
var myDiapo = $(".diaporama1").jDiaporama({
delay:5,
theme:"border",
useThumbs: false,
thumbsDir: "img/galerie/thumbs/",
width:400,
height:200,
transition:"fade"
});
$("#prev").click(function(){
myDiapo.data("jDiaporama").prev();
})
$("#next").click(function(){
myDiapo.data("jDiaporama").next();
})
$("#decreaseSlices").click(function(){
nbSlices = myDiapo.data("jDiaporama").getOption('nbSlices');
myDiapo.data("jDiaporama").changeOption("nbSlices", --nbSlices);
})
$(".diaporama1").parent().parent().parent().bind("jDiaporama:pause", function(event, pause){
if(!pause)
$("#togglePause").val("Pause");
else
$("#togglePause").val("Play");
})
$("#togglePause").click(function(){
myDiapo.data("jDiaporama").pauseSlider();
})
});
</script>
<script type="text/javascript">
$(document).ready(function(){
var myDiapo = $(".diaporama1").jDiaporama({
delay:5,
theme:"border",
useThumbs: false,
thumbsDir: "img/galerie/thumbs/",
width:400,
height:200,
transition:"fade"
});
$("#prev").click(function(){
myDiapo.data("jDiaporama").prev();
})
$("#next").click(function(){
myDiapo.data("jDiaporama").next();
})
$("#decreaseSlices").click(function(){
nbSlices = myDiapo.data("jDiaporama").getOption('nbSlices');
myDiapo.data("jDiaporama").changeOption("nbSlices", --nbSlices);
})
$(".diaporama1").parent().parent().parent().bind("jDiaporama:pause", function(event, pause){
if(!pause)
$("#togglePause").val("Pause");
else
$("#togglePause").val("Play");
})
$("#togglePause").click(function(){
myDiapo.data("jDiaporama").pauseSlider();
})
});
</script>
Pour finir, j'intègre ce bout de code HTML dans mon modèle :
Code :
<div class="diapo">
<ul class="diaporama1">
<li><img src="img/galerie/image1.jpg" alt="On the road again" title="Sur la route de l'ouest, Arizona © Guillaume Voisin" /></li>
<li><img src="img/galerie/image2.jpg" alt="Venice Beach, California" title="Les garde-côte sur le" /></li>
<li><img src="img/galerie/image3.jpg" alt="Venice Beach, California" title="Les garde-côte sur les plages de Malibu © Guillaume Voisin" /></li>
<li><img src="img/galerie/image4.jpg" alt="Universal Studios" title="Le parc d'attractions Universal Studios © Guillaume VoisinGrande grande description blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla" /></li>
<li><img src="img/galerie/image5.jpg" alt="Hollywood Sign" title="Le fameux panneau Hollywood sur la colline © Guillaume Voisin" /></li>
</ul>
</div>
<ul class="diaporama1">
<li><img src="img/galerie/image1.jpg" alt="On the road again" title="Sur la route de l'ouest, Arizona © Guillaume Voisin" /></li>
<li><img src="img/galerie/image2.jpg" alt="Venice Beach, California" title="Les garde-côte sur le" /></li>
<li><img src="img/galerie/image3.jpg" alt="Venice Beach, California" title="Les garde-côte sur les plages de Malibu © Guillaume Voisin" /></li>
<li><img src="img/galerie/image4.jpg" alt="Universal Studios" title="Le parc d'attractions Universal Studios © Guillaume VoisinGrande grande description blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla" /></li>
<li><img src="img/galerie/image5.jpg" alt="Hollywood Sign" title="Le fameux panneau Hollywood sur la colline © Guillaume Voisin" /></li>
</ul>
</div>
Les résultats sont surprenants
!!!! Le modèle est utilisé par 2 pages : "A propos" et "Actualités". La page "A propos" n'interprète pas mon bout de code javascript intégré dans la page alors que la page "Actualité" si (le diaporama fonctionne). Sans trop savoir pourquoi et de manière aléatoire, la page "Actualités" n'interprète plus le code et le diaporama ne fonctionne plus.
Lorsque j'utilise firebug, voilà son message d'erreur
Code :
$ is not defined
$(document).ready(function(){
$(document).ready(function(){
Le message d'erreur dans Automne est le suivant :
Code :
2011-11-30 10:03:51|http|CMS_object_common->getValue (line 716) : Unknown value to get : fileExtension
2011-11-30 10:03:51|http|CMS_object_common->getValue (line 716) : Unknown value to get : fileSize
2011-11-30 10:03:51|http|CMS_object_common->getValue (line 716) : Unknown value to get : fileSize
J'avoue que je ne comprends pas du tout ce qu'il se passe. J'ai essayé d'intégrer mon bout de code javascript dans un fichier et de l’appeler dans le header mais ça ne marche pas non plus. Ce que je comprends encore moins c'est comment le diaporama peut fonctionner sur une page et pas sur l'autre alors que le modèle utilisé est le même pour ces 2 pages.
J'espère avoir été compréhensible. Need help !
Merci
Pour rappel :
Automne 4.1.3
Local
Mac OS 10.6.8