Mettre un lien sur un caroussel

Bonsoir,

j'ai un caroussel qui fonctionne a merveille. Le seul truc qui me manque c'est de rendre les diapo cliquable.

J'ai essayé d'ajouté un href sur le fichier php mais ça ne fonctionne que pour le premier affichage de la diapo. Mais pas quand on clic sur son numero ou apres un tour.
Je suppose qu'il faut que je le mette dans le fichier js. Mais comment faire ?

voila mon code:

/*
    CARROUSEL JS
*/


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.6);   // 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 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"));
});

<div id="carrousel">
				<div id="slide1" class="slide">
					<div class="visu">
					<a href="#"><img src="images/slide1.jpg"></a>'; 
					<img src="images/slide1.jpg"/>
					</div>
					<div class="title">
					Un titre
					</div>
				</div>
				
				<div id="slide2" class="slide">
					<div class="visu">
					<a href="#"><img src="images/slide2.jpg"/></a>
					</div>
					<div class="title">
					Un titre 2
					</div>
				</div>
				
				
				<div id="slide3" class="slide">
					<div class="visu">
					<img src="images/slide3.jpg"/>
					</div>
					<div class="title">
					Un titre pour la troisieme fois
					</div>
				</div>
</div>

Merci d'avance !

jejemo
Modifié par jejemo (25 Jan 2010 - 01:01)

Bonjour,

Je ne suis pas très calée en JS mais je peux tenter de t'aider.

Déjà j'aurais une question, pourquoi as-tu 2 déclarations différentes dans tes div supposées être des slides ? :

				<div id="slide1" class="slide">
					<div class="visu">
					[b]<a href="#"><img src="images/slide1.jpg"></a>'; 
					<img src="images/slide1.jpg"/>[/b]
					</div>
					<div class="title">
					Un titre
					</div>
				</div>
				<div id="slide2" class="slide">
					<div class="visu">
					[b]<a href="#"><img src="images/slide2.jpg"/></a>[/b]
					</div>
					<div class="title">
					Un titre 2
					</div>
				</div>

Je pense que la 2ème est la bonne si tu souhaites mettre des liens sur tes slides.
Aurais tu un exemple en ligne ? (plus facile à débugger avec des outils)

Ensuite, pour t'aider, je pense que tu devrais indenter ton code complètement, là il ne l'est que partiellement, et ne pas sauter des lignes à chaque retour chariot. Ca fait un scrolling long et un aperçu global optimisé est préférable, surtout pour débugger (enfin là je parle pour moi)

Bon courage en tout cas !

Lu