Ça y est! Ça a pris la nuit mais on en est venu à bout.
Le problème d'adapter
le script d'origine à des galeries multiples vient de l'utilisation de "id" : c'est utilisé pour dénommer un élément unique, d'une part, et dans le CSS d'autre part.
A cause de la propriété d'unicité on ne peut pas garder id si on a met une boucle (un tour par galerie).
Pour parer au problème n°1 :
on utilise "name" et "getElementsbyname" (notez le pluriel à ElementS) il permet de récupérer tous les élements à qui on a donné le nom "galerie" par exemple.
Pour le pb n°2 :
on utilise des classes au lieu de id (car le CSS ne reconnaît pas les tags "name".
Pour ce qui est de la boucle, elle détecte toute seule le nombre de galeries dans la page.
Allons y
1) l'HTML : je prend ici l'exemple de trois galeries
<body >
<!--Un petit menu au début pour aider à la navigation. Si vous n'en voulez pas, enlevez-le ainsi que les tags <a name=""> dans les <H2>.-->
<center>
-- <a href="#1">Galerie 1</A> ---
<a href="#2">Galerie 2</A> ---
<a href="#3">Galerie 3</A> ---
</Center>
<H2><a name="1">Galerie 1</a></H2>
<div class="galerie" name="galerie">
<ul class="galerie_mini" name="galerie_mini">
<li><a href="images/1.jpg" title="Titre de l'image 1"><img src="images/mini/1.jpg" alt="1" /></a></li>
<li><a href="images/2.jpg" title="Titre de l'image 2"><img src="images/mini/2.jpg" alt="2" /></a></li>
<li><a href="images/3.jpg" title="Titre de l'image 3"><img src="images/mini/3.jpg" alt="3" /></a></li>
</ul>
<dl name="photo" class="photo">
<dt>Titre del'image 1</dt>
<dd><img name="big_pict" src="images/1.jpg" alt=" 1" /></dd>
</dl>
</div>
<H2><a name="nouvelles">Galerie 2</A></H2>
<div class="galerie" name="galerie">
<ul class="galerie_mini" name="galerie_mini">
<li><a href="images/4.jpg" title="Titre de l'image 4"><img src="images/mini/4.jpg" alt="1" /></a></li>
<li><a href="images/5.jpg" title="Titre de l'image 5"><img src="images/mini/5.jpg" alt="2" /></a></li>
<li><a href="images/6.jpg" title="Titre de l'image 6"><img src="images/mini/6.jpg" alt="3" /></a></li>
</ul>
<dl name="photo" class="photo">
<dt>Titre del'image 4</dt>
<dd><img name="big_pict" src="images/4.jpg" alt=" 4" /></dd>
</dl>
</div>
<H2><a name="jeunesse">Jeunesse</A></H2>
<div class="galerie" name="galerie">
<ul class="galerie_mini" name="galerie_mini">
<li><a href="images/1.jpg" title="Titre de l'image 1"><img src="images/mini/1.jpg" alt="1" /></a></li>
<li><a href="images/2.jpg" title="Titre de l'image 2"><img src="images/mini/2.jpg" alt="2" /></a></li>
<li><a href="images/3.jpg" title="Titre de l'image 3"><img src="images/mini/3.jpg" alt="3" /></a></li>
</ul>
<dl name="photo" class="photo">
<dt>Titre del'image 1</dt>
<dd><img name="big_pict" src="images/1.jpg" alt=" 1" /></dd>
</dl>
</body>
2) CSS pour mettre un peu de style dans tout ça (suggestion de présentation, qui est très proche de celle d'Olivier dans le tuto d'origine))
div.galerie
{
background: #eed ;
border: 1px solid #dcb ;
padding: 15px ;
margin: 15px 30px ;
text-align: center ;
font: 0.9em Georgia, serif ;
}
ul.galerie_mini
{
margin: 0 ;
padding: 0 ;
list-style-type: none ;
}
ul.galerie_mini li
{
float: left ;
}
ul.galerie_mini li a img
{
margin: 2px 1px ;
border: 1px solid #dcb ;
}
dl.photo
{
clear: both ;
margin: 0 auto ;
}
dl.photo dt
{
font: 2em Verdana, sans-serif ;
color: #666 ;
}
dl.photo dd
{
margin: 0 ;
}
dl.photo img
{
border: 1px solid #dcb ;
}
3) JavaScript : On l'appelle avec cette ligne dans la partie <head> :
<script type="text/javascript" src="script.js"></script>
Le fichier script.js est assez simple à comprendre si on connait celui de la galerie simple : au lieu de tableau de liens, on fait un double tableau avec les numéros de galerie en deuxième dimension.
function displayPics()
{
var big_photo = new Array();
var photos= new Array();
var liens= new Array();
var titre_photo = new Array();
//Ce sont des
for (var j=0 ; j <document.getElementsByName('galerie_mini').length; j++){
//Pour chaque galerie, (de la n°1 à la n°N avec N la longueur du tableau dans lequel on a mis les galerie_mini) on effectue la boucle
photos[j] = document.getElementsByName('galerie_mini')[j] ;
// On récupère l'élément ayant pour name galerie_mini
liens[j] = new Array();
liens[j] = photos[j].getElementsByTagName('a') ;
// On récupère dans une variable tous les liens contenu dans galerie_mini
big_photo[j] = document.getElementsByName('big_pict')[j] ;
// Ici c'est l'élément ayant pour name big_pict qui est récupéré, c'est notre photo en taille normale
titre_photo[j] = document.getElementsByName('photo')[j].getElementsByTagName('dt')[0] ;
// Et enfin le titre de la photo de taille normale
//}
//for (var j=0; j<2; j++){
// Une boucle parcourant l'ensemble des liens contenu dans galerie_mini
for (var i = 0 ; i < liens[j].length ; ++i) {
// Au clique sur ces liens
//document.write(i+' '+j+'<br>');
liens[j][i].name = j;
liens[j][i].onclick = function() {
big_photo[this.name].src = this.href; // On change l'attribut src de l'image en le remplaçant par la valeur du lien
big_photo[this.name].alt = this.title; // On change son titre
titre_photo[this.name].firstChild.nodeValue = this.title; // On change le texte de titre de la photo
return false; // Et pour finir on inhibe l'action réelle du lien
};
}
}
}
window.onload = displayPics;
// Il ne reste plus qu'à appeler notre fonction au chargement de la page
Chez moi ça rend assez bien, tenez-moi au courant de vos résultats
Le principal responsable de cette jolie chose est Stéphane Aicardi, merci à lui.
(PS : c'est con, le i entrecrochet dans le code met toute la suite en italique...)
[/i][/i]
(17 May 2006 - 21:54)
Merci d'avance 
