18041 sujets

Questions générales et questions de débutants

Augmenter le descriptif d'une photo dans lagalerie

Bonjour à tous, je suis nouveau sur le forum et je le confesse, totalement novice en javascript...
J'ai créer une galerie d'image avec le script proposé dans http://css.alsacreations.com/Tutoriels-JavaScript/galerie-photo-javascript
qui fonctionne très bien sauf que....
Je voudrais pouvoir, en plus du titre de la photo, afficher d'autres informations (sous titre, ref, date, etc) de manière indépendante et changeante, comme c'est le cas pour le titre.
(Voici mon script.js de base (le même que dans le tuto)


function displayPics()
{
var photos = document.getElementById('galerie_mini') ;
var liens = photos.getElementsByTagName('a') ;
var big_photo = document.getElementById('big_pict') ;
	for (var i = 0 ; i < liens.length ; ++i) 
{
liens[i][i].onclick = function() 
{
	big_photo.src = this.href; 
	big_photo.alt = this.title;
 	titre_photo.firstChild.nodeValue = this.title; 
       	return false; 
};
}
}
window.onload = displayPics;


mon document.css 


div#galerie
{	width: 1000px ;
	border: 0px;
	texte-align: center ;
	padding: 15px ;
	margin: 15px 30px ;
	font: 0.9em Georgia, serif ;
}

ul#galerie_mini
{	float: right ;
	margin: 0 ;
	padding: 0 ;
	list-style-type: none ;
}

ul#galerie_mini li
{	text-align: right ;
}

ul#galerie_mini li a img
{	margin: 2px 1px ;
	border: 2px solid #dcb ;
}

dl#photo
{	text-align: left;
	margin: 0 auto ;
}

dl#photo dt
{	font-family: sans-serif;
	color: #FF0000;
	font-size: 150%;
}

dl#photo dd
{	margin: 0 ;
}

dl#photo img
{	border: 4px solid #dcb ;
}



et le corps de mon fichier.html, un peu modifié par rapport à celui d'alsacretaion (j'ai juste retouché la place des elements flottants)


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HEAD>
   <meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
   <meta name="Author" CONTENT="auteur">
   <link href="document.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="script.js"></script>
    <title></title>
</HEAD>

<BODY>
<p>blabla</p>

<div id="galerie">
        <ul id="galerie_mini">
               <li><a href="images/normale/img1.jpg" title="titre photo 1" ><img src="images/petite/m-img1.jpg" alt=""  /></a>
		    <a href="images/normale/img2.jpg" title="titre photo 2" ><img src="images/petite/m-img2.jpg" alt="" /></a>
	       </li>
	</ul>

	<dl id="photo">
		<dt>titre photo 1</dt>
		<dd><img id="big_pict" src="images/normale/img1.jpg" alt=""/></img></dd>
</div>
</BODY>
</HTML>



Ce que j'ai essayé consistait à rajouter une variable dans le script, et compléter la fonction, ainsi:

function displayPics()
{var photos = document.getElementById('galerie_mini') ;
var liens = photos.getElementsByTagName('a') ;
var big_photo = document.getElementById('big_pict') ;
var titre_photo = document.getElementById('photo').getElementsByTagName('dt')[0] ;
var ref_photo = document.getElementById('photo').getElementsByTagName('dd')[0] ;
	
      for (var i = 0 ; i < liens.length ; ++i) 
{
liens[i].onclick = function() 
{
	big_photo.src = this.href; 
	big_photo.alt = this.title;
        titre_photo.firstChild.nodeValue = this.title; 
     
        big_photo.alt = this.ref;
        ref_photo.firstChild.nodeValue = this.ref;
	return false; 
};
}
}
window.onload = displayPics;


en modifiant comme suit mon .html


<div id="galerie">
        <ul id="galerie_mini">
               <li><a href="images/normale/img1.jpg" title="titre photo 1" [b]ref="ref photo 1"[/b] ><img src="images/petite/m-img1.jpg" alt=""  /></a>
		    <a href="images/normale/img2.jpg" title="titre photo 2" [b]ref="ref photo 2"[/b]><img src="images/petite/m-img2.jpg" alt="" /></a>
	       </li>
	</ul>

	<dl id="photo">
		<dt>titre photo 1</dt>
		[b]<dd>ref photo 1</dd>[/b]
                <dd><img id="big_pict" src="images/normale/img1.jpg" alt=""/></img></dd>
</div>


Voilà, en fait je voudrais que les autres paramètres réagissent comme "titre". L'autre var que j'ai rajouté dans le .js ne marche pas,puisque la ligne <dd></dd> n'affiche rien d'autre que ce qui est inscrit dedans à la base (ref photo1).
Pensez vous qu'une telle manœuvre soit possible ?

Merci ...[/i][/i] [/i]
Modifié par Gnomme (02 May 2008 - 17:11)
Sujet clos
Aller à