Javascript qui ne fonctionne pas dans un diaporama intégré à la page d'accueil

[ValkyrjaoftheNorth]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox, Internet Explorer
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : Le code n'a jamais fonctionné.
Lien du forum : http://wild-fantasy.forumactif.org

Description du problème

Bonjour,

Je rencontre quelques difficultés pour mettre en place un diaporama sur la page d'accueil de mon forum (http://wild-fantasy.forumactif.org). J'utilise un tutoriel qui se présente en trois parties : une HTML, une CSS et une Javascript.

Les parties HTML et le CSS fonctionnent parfaitement, mais pour une raison que j'ignore, le Javascript refuse de s'appliquer. La gestion des codes Javascript est bien activée et j'ai placé <script src=http://wild-fantasy.forumactif.org/11330.js></script> dans la description de mon forum.

Voici les trois codes :

Code:

<div align="center">
<div align="center" class="contener_slideshow">
<div class="contener_dotslide">
<div class="dotslid" id="dotslid0" iddotslid='0'>&nbsp;</div>
<div class="dotslid" id="dotslid1" iddotslid='1'>&nbsp;</div>
<div class="dotslid" id="dotslid2" iddotslid='2'>&nbsp;</div>
</div>
<div class="contener_slide" rangactuel='0'>
<div class="slid_1">
<img src="http://img.myzupics.com/ac/i3z.png" style="margin-left: -10px;" />
</div>
<div class="slid_2">
<img src="http://img.myzupics.com/ac/i3z.png" style="margin-left: -10px;" />
</div>
<div class="slid_3">
<img src="http://img.myzupics.com/ac/i3z.png" style="margin-left: -10px;" />
</div>
</div>
</div>
</div>

Code:

$(document).ready(function(){
var slideshowexecution = function() {
$('.dotslid').css({'background-color':'#f8b334'});
var rangactuel=$('.contener_slide').attr('rangactuel');
if(rangactuel==2)
{
$('.contener_slide').attr('rangactuel','0');
rangactuel=0;
var decallage='0px';
}
else
{
rangactuel=parseInt(rangactuel)+1;
$('.contener_slide').attr('rangactuel',rangactuel);
var decallage='-=610px';
}
$('#dotslid'+rangactuel).css({'background-color':'#cb2025'});
$( ".contener_slide" ).animate({
left: decallage
}, 400, function() {
// Animation complete.
});
};
var start_slideshow = null;
start_slideshow = function(){
slideshowexecution();
}, 4000);
$(".dotslid").click(function()
{
$('.dotslid').css({'background-color':'#f8b334'});
$(this).css({'background-color':'#cb2025'});
clearInterval(start_slideshow);
var rangimg=$(this).attr('iddotslid');
$('.contener_slide').attr('rangactuel',rangimg);
rangimg=parseInt(rangimg*610);
$( ".contener_slide" ).animate({
left: '-'+rangimg+'px'
}, 500, function() {
// Animation complete.
});
start_slideshow = function(){slideshowexecution();}, 4000);
});
});

Code:

.dotslid {
  border-radius:10px;
  background-color: gray;
  box-shadow: 1px 1px 8px #333333;
  height: 10px;
  width: 10px;
  display: inline-block;
  cursor:pointer;
}

#dotslid0 {
  background-color: #7A9DBF;
}

.contener_dotslide {
  width: 100%;
  position: absolute;
  z-index: 999;
  bottom: 20px;
}

.contener_slideshow {
  width:230px;
  height:250px;
  overflow: hidden;
  margin-top: 10px;
  position: relative;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  box-shadow: 0px 0px 5px black;
}

.slid_1, .slid_2, .slid_3 {
  position: absolute;
  width:230px;
  height:500px;
  margin:0 5px;
  background-color:#00a096;
}

.slid_1 {
  left: 0;
}

.slid_2 {
  left: 230px;
}

.slid_3 {
  left: 460px;
}

.contener_slide {
  width: 1830px;
  height: 250px;
  left:0px;
  position: absolute;
  font-size:24px;
  color:#ffffff;
}

Je précise que je maîtrise assez bien le CSS et l'HTML mais que le Javascript reste obscur pour moi ^^

Merci d'avance !

[AenigmA]

Bonjour,

Ton script étant dans les JS et coché sur l'accueil, il n'est nul besoin de le mettre dans description, ça fait double emploi (si j'ai bien compris).

Bonne Année à toi

[ValkyrjaoftheNorth]

Bonjour, merci d'avoir répondu !

J'ai enlevé le JS de la description, mais le diaporama ne fonctionne toujours pas :/

Bonne année à vous !

[AenigmA]

Bonjour,
Effectivement, j'ai essayé sur une page html et il ne fonctionne pas. Il doit donc manquer quelque chose.
Vérifie le tuto où tu l'as trouvé

[ValkyrjaoftheNorth]

Bon impossible d'envoyer un lien du tuto, j'ai vérifié que j'avais bien c/c le code mais ça a l'air d'être le cas :/

Ils disent juste à la fin "• jQuery Library : http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js", est-ce que ça pourrait être en lien ?

[AenigmA]

CC, donne moi que la fin du lien, je sais que c'est never

Sinon tu as celui ci sans js ICI

[Karlozi]

Bonjour,

Rajoute le lien que tu as donné plus haut dans une balise Script et met ta ligne de code après la balise <title> de ton template overall_header. N'oublie pas de conserver le Javascript que tu as déjà :

Voici la ligne de code,

Code:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js" type="text/javascript"></script>

Cordialement,
Karlozi

[ValkyrjaoftheNorth]

Merci pour vos deux réponses ! J'ai testé le template overall_header sans plus de succès :/

Néanmoins celui sans JS semble fonctionner ! J'avais trouvé le tuto sur un autre site qui n'avait rien à voir ^^

Merci énormément, je passe le sujet en résolu !