Lien carrousel

Par Geetix, il y a 15 ans

Javascript

Bonjour,

J'ai adapté le carrousel qu'a fourni Jonathan sur mon site.
En voulant mettre des liens sur différent slide, j'ai remarqué une erreur qui me laisse perplexe :

Imaginons deux slides, le 1er contient un lien et le second aussi.
Lorsque je vais sur le slide 2 puis que je retourne sur le slide 1,
le lien du premier slide ne marche plus (je ne peux plus cliquer dessus).

Et, le lien du deuxième slide reste toujours cliquable !

(Beaucoup de "slide" dit donc :p !)

Est-ce une erreur du script javascript ?
Comment corriger cette erreur ?

Merci,
Etix.

Annexe : Lien du tuto !

8 réponses

FionaCharmant, il y a 14 ans

Bonjour et merci à Graphikart pour ses tutos qui m'aident beaucoup, c'est un super site.
J'ai le même souci pour mettre des liens, j'aurai aimé mettre des liens sur chaque image mais ça ne fonctionne pas, je ne m'en suis pas rendu compte. Est-ce que vous auriez la solution ?
Merci beaucoup

Voici le code :
la page html :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript" src="carrousel.js"></script>

<style>
#carrousel{
    width:992px;
    height:664px;
    overflow:hidden;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 0px;
    float: left;
    vertical-align: top;
    margin-right: 0px;
}
.slide{
    position:absolute;
    top:0;
    left:0;
    width:992px;
    height:664px;
    float: left;
}
.title{
    position:absolute;
    padding-left:30px;
    width:200px;
    line-height:normal;
    height:555px;
    bottom:0;
    left:0;
    background:url(img/opaque.png) top left repeat;
    margin-left: 30px;
    vertical-align: top;
    top: 0px;
    padding-top: 38px;
    padding-right: 30px;
    padding-bottom: 30px;
    font-family: Arial, Helvetica, sans-serif;
    margin-top: 0px;
}
.navigation{
    position:absolute;
    bottom:38px;
    right:5px;
}
.navigation span{
    background:#000;
    color:#FFF;
    cursor:pointer;
    margin-top: 0;
    margin-right: 1px;
    margin-bottom: 0;
    margin-left: 0px;
    padding-top: 2px;
    padding-right: 4px;
    padding-bottom: 2px;
    padding-left: 0px;
}
.navigation span:hover,.navigation span.active{
    background:#FFF;
    color:#000;
}
.TexteDiaporama {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 45px;
    color: #080F21;
    margin-left: 0px;
    margin-right: 0px;
    padding-left: 0px;
    font-weight: normal;
    padding-right: 0px;
    margin-bottom: 2px;
    margin-top: 0px;
    padding-top: 0px;
    font-style: normal;
    padding-bottom: 20px;
}
.TexteDiaporama2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #080F21;
    margin-left: 2px;
    margin-right: 0px;
    padding-left: 0px;
    font-weight: normal;
    padding-right: 0px;
    margin-bottom: 2px;
    margin-top: 0px;
    padding-top: 0px;
    font-style: normal;
    text-align: justify;
    padding-bottom: 20px;
}
.TexteDiaporama3 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #4FC614;
    margin-left: 2px;
    margin-right: 0px;
    padding-left: 0px;
    font-weight: normal;
    padding-right: 0px;
    margin-bottom: -8px;
    margin-top: -10px;
    padding-top: 0px;
    font-style: normal;
    text-align: justify;
    text-decoration: none;
}
.Textehr {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 3px;
    color: #4FC614;
    margin-left: 2px;
    margin-right: 0px;
    padding-left: 0px;
    font-weight: normal;
    padding-right: 0px;
    margin-bottom: 2px;
    margin-top: 0px;
    padding-top: 0px;
    font-style: normal;
    border: 1px solid #FFFFFF;
    text-align: justify;
    text-decoration: none;
}
.TexteDiaporama4 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #000000;
    margin-left: 2px;
    margin-right: 0px;
    padding-left: 0px;
    font-weight: normal;
    padding-right: 0px;
    margin-bottom: 2px;
    margin-top: -4px;
    padding-top: 0px;
    font-style: normal;
    text-align: left;
    text-decoration: none;
}
#conteneur {
    width:992px;
    height:664px;
    overflow:hidden;
    margin-top: 0;
    margin-right: 0px;
    margin-bottom: 0;
    margin-left: 0px;
    float: left;
    vertical-align: top;
}
.title{
    position:absolute;
    padding-left:30px;
    width:200px;
    line-height:normal;
    height:555px;
    bottom:0;
    left:0;
    background:url(img/opaque.png) top left repeat;
    margin-left: 30px;
    vertical-align: top;
    top: 0px;
    padding-top: 38px;
    padding-right: 30px;
    padding-bottom: 30px;
    font-family: Arial, Helvetica, sans-serif;
    margin-top: 0px;

}

</style>

</head>
<body>
  <div id="conteneur">
     <div id="carrousel">

    <div id="slide1" class="slide">
       <div class="visu">
        <a href="#nogo" TARGET="_parent"><img src="img/LifeSciences2.jpg" width="992px" height="664px" 
border="0"/>    </a></div>
        <div class="title">
        <p class="TexteDiaporama">Div</p>
        <br />

      <hr />
        <br />

        <p class="TexteDiaporama4"> </p>
        </div>
    </div>

    <div id="slide2" class="slide">
       <div class="visu">
        <a href="#nogo" TARGET="_parent"><img src="img/LifeSciences2.jpg" width="992px" height="664px" 
border="0"/>    </a></div>
        <div class="title">
        <p class="TexteDiaporama">Div</p>
        <br />

      <hr />
        <br />

        <p class="TexteDiaporama4"> </p>
        </div>
    </div>

    <div id="slide3" class="slide">
        <div class="visu">
        <a href="#nogo" TARGET="_parent"><img src="img/LifeSciences2.jpg" width="992px" height="664px" 
border="0"/>    </a></div>
        <div class="title">
        <p class="TexteDiaporama">Div</p>
        <br />

      <hr />
        <br />

        <p class="TexteDiaporama4"> </p>
        </div>
    </div>

    <div id="slide4" class="slide">
        <div class="visu">
        <a href="#nogo" TARGET="_parent"><img src="img/LifeSciences2.jpg" width="992px" height="664px" 
border="0"/>    </a></div>
        <div class="title">
        <p class="TexteDiaporama">Div</p>
        <br />

      <hr />
        <br />

        <p class="TexteDiaporama4"> </p>
        </div>
    </div>

    <!--
    <div class="navigation">
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
    -->
     </div>
  </div>
</body>
</html>

le code javascript : 

var carrousel = {

    nbSlide : 0,
    nbCurrent : 1,
    elemCurrent : null,
    elem : null,
    timer : null,

    init : function(elem){
        this.nbSlide = elem.find(".slide").length;

        // Créer la pagination
        elem.append('<div class="navigation"></div>');
        for(var i=1;i<=this.nbSlide;i++){
            elem.find(".navigation").append("<span>"+i+"</span>");
        }
        elem.find(".navigation span").click(function(){ carrousel.gotoSlide($(this).text()); })

        // Initialisation du carrousel
        this.elem=elem;
        elem.find(".slide").hide();
        elem.find(".slide:first").show();
        this.elemCurrent = elem.find(".slide:first");
        this.elem.find(".navigation").css("opacity",0.7); // On rend la navigation opaque
        this.elem.find(".navigation span:first").addClass("active");

        // On cré le timer
        carrousel.play();
        // Stop quand on passe dessus
        //elem.mouseover(carrousel.stop);
        elem.mouseout(carrousel.play);
    },

    gotoSlide : function(num){
        if(num==this.nbCurrent){ return false; }

        /* Animation en fadeIn/fadeOut 
        this.elemCurrent.fadeOut();
        this.elem.find("#slide"+num).fadeIn();
        */
        /* Animation en slide 
        var sens = 1;
        if(num<this.nbCurrent){ sens = -1;}
        var cssDeb = { "left" : sens*this.elem.width() };
        var cssFin = { "left" : -sens*this.elem.width() };
        this.elem.find("#slide"+num).show().css(cssDeb);
        this.elem.find("#slide"+num).animate({"top":0,"left":0},500);
        this.elemCurrent.animate(cssFin,500);

        /*
        Animation Titre + Fadein/Out sur la div visu
        */
        this.elemCurrent.find(".visu").fadeOut();
        this.elem.find("#slide"+num).show();
        this.elem.find("#slide"+num+" .visu").hide().fadeIn();
        var titleHeight = this.elemCurrent.find(".title").height();
        this.elemCurrent.find(".title").animate({"bottom": -titleHeight},500);
        this.elem.find("#slide"+num+" .title").css("bottom",-titleHeight).animate({"bottom": 0},500);
        //*/

        this.elem.find(".navigation span").removeClass("active");
        this.elem.find(".navigation span:eq("+(num-1)+")").addClass("active");
        this.nbCurrent = num;
        this.elemCurrent = this.elem.find("#slide"+num);
    },

    next : function(){
        var num = this.nbCurrent+1;
        if(num >this.nbSlide){
            num = 1;
        }
        this.gotoSlide(num);
    },
    prev : function(){
        var num = this.nbCurrent-1;
        if(num< 1){
            num= this.nbSlide;
        }
        this.gotoSlide(num);
    },
    stop : function(){
        window.clearInterval(carrousel.timer);
    },
    play : function(){
        window.clearInterval(carrousel.timer);
        carrousel.timer = window.setInterval("carrousel.next()",5000);
    }
}
$(function(){
    carrousel.init($("#carrousel"));
});
Grafikart, il y a 15 ans

Tu aurais un exemple en ligne ?

Geetix, il y a 15 ans

Voila : Ici

Arbiter0x, il y a 15 ans

Ca me le fait aussi, pas de solution(s)?

agrafik, il y a 15 ans

Salut, ton soucis est bel et bien lié au script carrousel.js . En faite, quand tu charge ta page pour essayer, tu peux cliquer sur ton lien 1, ensuite tu passe au slide 2 et tu peux cliquer le lien 2; Or quand tu reviens au slide 1 tu ne peux plus cliquer le lien 1, mais tu peux aller en slide 2 et cliquer sur le lien 2, celui ci ne t'es pas "interdit". J'ai donc regardé ton code, et en activant l'animation en SLIDE, le soucis disparait, je pense que quelque chose dans l'animation en slide empêche se blocage, ou quelque chose dans le slide par défaut empêche le lien de revenir actif.

Je cherche l'erreur ;)

EDIT: Et bien pas trop de solution pour ma part car j'ai même essayé avec les sources de Grafikart, ça fait pareil. J'ai mit un lien au slide 1 et un au slide 4 , si on choisi un autre slide que le 1, et que l'on revient au 1, on ne peut pas cliquer sur le lien, mais pour le lien 4 si.

Grafikart, il y a 15 ans

Pas prévu le coup... L'idée serait de "dégager" les slides qui ne sont pas visibles sur les côtés pour empêcher ce problème là.

Sinon essaie un autre type de slider comme Anything slider http://css-tricks.com/examples/AnythingSlider/ qui est mieux conçu pour ce type d'utilisation.

palmer08, il y a 15 ans

Pour info, je viens de faire le tuto et je n'ai aucun problème. Donc ça ne viens pas du tuto :)

Geetix, il y a 15 ans

Merci quand même pour vos réponses !

Je vais regarder Anything.
Si vous trouvez la solution, n'hésitez pas à le faire savoir ;-)