Besoin d'aide

Bonjour à tous,

Je demande votre aide car je suis un peu bloquée sur un de mes projet.

Je suis en train de développer un site pour une photographe et je cherche à répondre à ses exigences en matière de Galerie d'image notamment.

La personne souhaite avoir une galerie avec les titres de ses photos sur le côté. J'ai réussi à adapter un code trouvé sur Internet, mais ce que j'aimerai ajouter et que j'ai du mal à faire, c'est a faire ressortir (par un cadre autour du titre de la photo, ou encore un soulignement) la photo sélectionnée et donc affichée dans la galerie.

J'aimerai aussi rajouter un module de légende pour les images (dans le meilleur des cas, dans le meilleur des mondes!!!!)

voici mon code Javascript

<script type="text/javascript">
theimage = new Array();
Format: theimage[...]=[image URL, link URL, name/description]
theimage[0]=["...", "", "..."];
theimage[1]=["...", "", "..."];
theimage[2]=["...", "", "..."];
theimage[3]=["...", "", "..."];
theimage[4]=[...", "", "..."];


///// Plugin variables


playspeed=3000;
linksperline=2; 
//#####

i=0;


//###########################################
window.onload=function(){

	
	preloadSlide();

	
	SetSlide(0);

}

//###########################################
function SetSlide(num) {
	
	i=num%theimage.length;
	
	if(i<0)i=theimage.length-1;

	
	document.images.imgslide.src=theimage[i][0];

	
	document.getElementById('slidebox').innerHTML=theimage[i][2];

}


//###########################################
function PlaySlide() {
	if (!window.playing) {
		PlayingSlide(i+1);
		if(document.slideshow.play){
			document.slideshow.play.value="   Stop   ";
		}
	}
	else {
		playing=clearTimeout(playing);
		if(document.slideshow.play){
			document.slideshow.play.value="   Play   ";
		}
	}
	if(document.images.imgPlay){
		setTimeout('document.images.imgPlay.src="'+imgStop+'"',1);
		imgStop=document.images.imgPlay.src
	}
}


//###########################################
function PlayingSlide(num) {
	playing=setTimeout('PlayingSlide(i+1);SetSlide(i+1);', playspeed);
}


//###########################################
function preloadSlide() {
	for(k=0;k<theimage.length;k++) {
		theimage[k][0]=new Image().src=theimage[k][0];
	}
}


</script>

j'ai ensuite créé un tableau, pour que tous les éléments s'affichent comme je le souhaite

<form name="slideshow">
<table border-collapse="collapse" width="920px" height="520px">
<tr>
<td rowspan="2" align="left" width="160px" height="520px" style="font:15pt Arial; color:#000000"; text-decoration:"underline";>
<script type="text/javascript">
	for(h=0; h<theimage.length; h++){
	document.write(' <a href="javascript:SetSlide('+h+')">'+theimage[h][2]+'</a> ');
		if(h+1%linksperline == linksperline){
			document.write('<br />');
		}
		}
		</script>	
</td>
<td rowspan="2" align="left" width="160px" height="520px"></td>
<td colspan="3" align="center" width="820px" height="480px">
<a href="#" onmouseover="this.href=theimage[i][1];return false">
	<script type="text/javascript">
		document.write('<img name="imgslide" id="imgslide" src="'+theimage[0][0]+'" border="0" width="600">')
	</script>
	</a> 
</td>
</tr>

<tr>
<td width="40px" height="40px" align="left"><a href="javascript:SetSlide(i-1);" onfocus="this.blur()"><img src="..." width="30" height="30" align="left" border="0" alt="Previous Image"></a><script type="text/javascript">imgStop=new Image().src='a4.jpg';</script></td>
<td width="640px" height="40px" align="center"><div id="slidebox" style="font:20pt Arial; color:#000000;"></td>
<td bouton width="40px" height="40px" align="right"><a href="javascript:SetSlide(i+1);" onfocus="this.blur()"><img src="..." width="30" height="30" align="right" border="0" alt="Next Image"></a><script type="text/javascript">imgStop=new Image().src='a4.jpg';</script></td>
</tr>

</table>

Quelqu'un pourrait-il m'aider parce que si j'arrive à bidouiller du javascript, je suis en revanche un peu paumée dans ce cas!!!

Merci d'avance

</form>
[/i][/i][/i]
Modifié par Justine (11 Dec 2012 - 13:43)

Hello,

Utilise les balises "code" en bas de l'éditeur de post pour mettre ton code.
C'est toujours plus simple si on a un lien vers un site.

Désolé pour le moment je ne peux pas faire plus
Charly