Carrousel + lightbox

Bonjour,

J'aurais besoin d'un éclairage ; j'ai commencé une galerie photo, mais au vu de ce que je veux obtenir, je ne sais pas si j'ai commencé par le bon bout.

Merci d'avance.

J'ai créé un carrousel avec jQuery. En fait c'est une simple liste de <li> contenant les images en taille réduite, avec des boutons suivant et précédent qui incrémentent un compteur et déplacent le conteneur.

Je souhaite que lorsqu'on clique sur une vignette, s'affiche une lightbox contenant
- l'image agrandie,
- des boutons précédent et suivant pour passer directement de l'une à l'autre.

Actuellement, j'ai une sorte de fausse box, consistant simplement à passer l'image en positionnement absolu, augmenter son z-index et l'agrandir avec la propriété css transform: scale(4);

Je sais que si je mets une vraie lightbox, elle sera dans une <div> en pied de page, cachée par un display:none; donc du coup je ne vois pas comment je peux déclarer l'image qui devra y être contenue.

Le compteur en Jquery me permet de connaître l'image en position gauche, mais je ne vois pas comment récupérer la position de la deuxième ou la troisième si le visiteur clique dessus.

Ni comment je pourrais permettre de passer, depuis cette ligthbox, d'une image à la suivante, comme dans le carrousel.

Voici la page actuelle :

http://www.ensembledecouvrir.com/photos/

Voici mon code actuel :

<div class="diaporama">

<div class="carrousel-prev"></div><div class="carrousel-next"></div>
<ul class="carrousel">

		<li><img tabindex="0" src="/diaporamas/a/01.jpg" alt="" /></li> 
		<li><img tabindex="0" src="/diaporamas/a/02.jpg" alt="" /></li> 
				<li><img tabindex="0" src="/diaporamas/a/03.jpg" alt="" /></li>
					<li><img tabindex="0" src="/diaporamas/a/04.jpg" alt="" /></li>
						<li><img tabindex="0" src="/diaporamas/a/05.jpg" alt="" /></li>
							<li><img tabindex="0" src="/diaporamas/a/06.jpg" alt="" /></li>
								<li><img tabindex="0" src="/diaporamas/a/07.jpg" alt="" /></li>
									<li><img tabindex="0" src="/diaporamas/a/08.jpg" alt="" /></li>
										<li><img tabindex="0" src="/diaporamas/a/09.jpg" alt="" /></li>	
	<li><img tabindex="0" src="/diaporamas/a/10.jpg" alt="" /></a></li>	
	</ul>
	

<script type="text/javascript" >

// Execution de cette fonction lorsque le DOM sera entièrement chargé
$(document).ready(function() {
	// Calcul préalables :
		// Element de référence pour la zone de visualisation (ici le premier item)
		Reference = $(".carrousel li:first-child");
		// Nombre d'éléments de la liste
		NbElement = $(".carrousel li").length;
	// Ciblage de la bande de diapositives
	$(".carrousel")
		// Englobage de la liste par la zone de visualisation
		.wrap('<div class="carrousel-conteneur"></div>')
		// Application d'une largeur à la bande de diapositive afin de conserver une structrure horizontale
		
		.css("width", (Reference.outerWidth(true)* NbElement) );
	// Ciblage de la zone de visualisation
	$(".carrousel-conteneur")
		// Application de la largeur d'une seule diapositive
		.width(  Reference.outerWidth(true)*3 )  
		// Application de la hauteur d'une seule diapositive
		.height( Reference.height() + 40 )
		// Blocage des débordements
		.css("overflow", "hidden")






// Actions de navigation
		// Initialisation du compteur
		Cpt = 0;
		// Clic sur le bouton "Suivant"
		$(".carrousel-next").click(function() {
			// Si le compteur est inférieur au nombre de diaposives moins 1
			if(Cpt < (NbElement-3) ) {
				// Ajout +1 au compteur (nous allons sur la diapositive suivante)
				Cpt++;				
				// Mouvement du carrousel en arrière-plan
				$(".carrousel").animate({
					marginLeft : - (Reference.outerWidth(true) * Cpt)
				});
			}
            // fin du if
		});
		// Action du bouton "Précédent"
		$(".carrousel-prev").click(function() {
			// Si le compteur est supérieur à zéro
			if(Cpt > 0) {
				// Soustraction -1 au compteur (nous allons sur la diapositive précédente)
				Cpt--;
				// Mouvement du carrousel en arrière-plan
				$(".carrousel").animate({
					marginLeft : - (Reference.outerWidth(true) * Cpt)
				});

			}
            // fin du if
            
         
            
            
            
		});
		
		

		
});





</script>

</div>

.carrousel-conteneur {display: inline-block; margin: 0 auto; vertical-align: middle; }


.carrousel {
	margin:0 auto;
	padding:0;
	height:75px;

	
}
.carrousel li {
	float:left;
	width:240px;
	height:140px;
	padding:30px 0 10px 0;
	list-style:none;
	color:#FFF;
	font:3em/1.2 Georgia, "Times New Roman", Times, serif;
	text-align:center;
	background: url(images/pellicule.png) repeat;
	

}


.carrousel li img {
width: auto;
height: 120px;
z-index: 100;  


	
	}

.carrousel li img:focus {  
    position: absolute;
        outline: none;  
        z-index: 200;  

       -webkit-transform: scale(4);  
        -moz-transform: scale(4);  
        -o-transform: scale(4);  
        transform: scale(4); 
         -moz-transition: all 1.0s ease-in-out;
	-webkit-transition: all 1.0s ease-in-out;
	-ms-transition: all 1.0s ease-in-out;
	-o-transition: all 1.0s ease-in-out; 

    }  

.carrousel-prev, .carrousel-next {width: 36px; height: 36px; vertical-align: middle; background-position: 0 0; background-repeat: no-repeat;}
.carrousel-prev:hover, .carrousel-next:hover {background-position: 0 -36px;}

.carrousel-prev {float: left; background-image: url(images/precedent.png);}
.carrousel-next {float: right; background-image: url(images/suivant.png);}