Alors, reprenons
Pour le sujet initial, c'est-à-dire le centrage des miniatures, je confirme que le display:inline fonctionne, merci beaucoup, Florent V. !!
Pour mettre plusieurs galeries sur une même page, j'ai une méthode un peu bourrine, mais qui fonctionne, et à vrai dire je vois pas trop comment faire autrement.
Tout d'abord, comme on utilise des div, j'ai défini dans ma CSS autant de styles qu'il y avait de galeries. Je m'explique. Considérons que tu veuilles mettre 3 galeries sur une même page. Je transforme alors :
div#galerie{
width: 410px ;
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: italic 2.5em/1.5em Georgia, serif ;
color: #dcb ;}
dl#photo dd{margin: 0 ;}
dl#photo img{border: 1px solid #dcb ;}
par :
div#galerie1, div#galerie2, div#galerie3{
width: 410px ;
background: #eed ;
border: 1px solid #dcb ;
padding: 15px ;
margin: 15px 30px ;
text-align: center ;
font: 0.9em Georgia, serif ;}
ul#galerie_mini1, ul#galerie_mini2, ul#galerie_mini3{
margin: 0 ;
padding: 0 ;
list-style-type: none ;}
ul#galerie_mini1 li, ul#galerie_mini2 li, ul#galerie_mini3 li{float: left ;}
ul#galerie_mini1 li a img, ul#galerie_mini2 li a img, ul#galerie_mini3 li a img{
margin: 2px 1px ;
border: 1px solid #dcb ;}
dl#photo1, dl#photo2, dl#photo3{
clear: both ;
margin: 0 auto ;}
dl#photo1 dt, dl#photo2 dt, dl#photo3 dt{
font: italic 2.5em/1.5em Georgia, serif ;
color: #dcb ;}
dl#photo1 dd, dl#photo2 dd, dl#photo3 dd{margin: 0 ;}
dl#photo1 img, dl#photo2 img, dl#photo3 img{border: 1px solid #dcb ;}
Dans gallerie.js, il faut alors lancer le script sur chaque galerie.
function displayPics()
{
var photos = document.getElementById('galerie_mini') ;
// On récupère l'élément ayant pour id galerie_mini
var liens = photos.getElementsByTagName('a') ;
// On récupère dans une variable tous les liens contenu dans galerie_mini
var big_photo = document.getElementById('big_pict') ;
// Ici c'est l'élément ayant pour id big_pict qui est récupéré, c'est notre photo en taille normale
// Une boucle parcourant l'ensemble des liens contenu dans galerie_mini
for (var i = 0 ; i < liens.length ; ++i) {
// Au clique sur ces liens
liens[i].onclick = function() {
big_photo.src = this.href; // On change l'attribut src de l'image en le remplaçant par la valeur du lien
return false; // Et pour finir on inhibe l'action réelle du lien
};
}
//2
var photos2 = document.getElementById('galerie_mini2') ;
var liens2 = photos2.getElementsByTagName('a') ;
if (liens2.length > 0){
//Test si au moins 2 albums, sinon inutile de continuer
var big_photo2 = document.getElementById('big_pict2') ;
for (var i = 0 ; i < liens2.length ; ++i) {
liens2[i].onclick = function() {
big_photo2.src = this.href;
return false;
};
}
//3
var photos3 = document.getElementById('galerie_mini3') ;
var liens3 = photos3.getElementsByTagName('a') ;
if (liens3.length > 0){
//Test si au moins 3 albums, sinon inutile de continuer
var big_photo3 = document.getElementById('big_pict3') ;
for (var i = 0 ; i < liens3.length ; ++i) {
liens3[i].onclick = function() {
big_photo3.src = this.href;
return false;
};
}
}
}
}
On remarquera un petit test avant chaque exécution de la boucle for(), afin d'éviter de perdre du temps s'il n'y a qu'un seul album sur la page, par exemple. Le tout est placé en cascade ; ainsi, s'il n'y a qu'un seul album, il n'effectuera que la première boucle et les 2 premières lignes consacrées à un éventuel 2e album, puis le script sera arrêté.
Pour finir, tu adaptes ta page contenant la partie affichage, en n'oubliant pas de numéroter chaque div :
<div id="[b]galerie1[/b]">
<ul id="[b]galerie_mini1[/b]">
<li><a href="images/photo1.png" title="Titre de la photo 1"><img src="images/minis/m_photo1.png" alt="Le titre de la photo 1" /></a></li>
<li><a href="images/photo2.png" title="Titre de la photo 2"><img src="images/minis/m_photo2.png" alt="Le titre de la photo 2" /></a></li>
<li><a href="images/photo3.png" title="Titre de la photo 3"><img src="images/minis/m_photo3.png" alt="Le titre de la photo 3" /></a></li>
<li><a href="images/photo4.png" title="Titre de la photo 4"><img src="images/minis/m_photo4.png" alt="Le titre de la photo 4" /></a></li>
<li><a href="images/photo5.png" title="Titre de la photo 5"><img src="images/minis/m_photo5.png" alt="Le titre de la photo 5" /></a></li>
<li><a href="images/photo6.png" title="Titre de la photo 6"><img src="images/minis/m_photo6.png" alt="Le titre de la photo 6" /></a></li>
<li><a href="images/photo7.png" title="Titre de la photo 7"><img src="images/minis/m_photo7.png" alt="Le titre de la photo 7" /></a></li>
<li><a href="images/photo8.png" title="Titre de la photo 8"><img src="images/minis/m_photo8.png" alt="Le titre de la photo 8" /></a></li>
<li><a href="images/photo9.png" title="Titre de la photo 9"><img src="images/minis/m_photo9.png" alt="Le titre de la photo 9" /></a></li>
</ul>
<dl id="[b]photo1[/b]">
<dt>Titre de la photo 1</dt>
<dd><img id="[b]big_pict1[/b]" src="images/photo1.png" alt="Photo 1 en taille normale" /></dd>
</dl>
</div>
<div id="[b]galerie2[/b]">
<ul id="[b]galerie_mini2[/b]">
<li><a href="images/photo1.png" title="Titre de la photo 1"><img src="images/minis/m_photo1.png" alt="Le titre de la photo 1" /></a></li>
<li><a href="images/photo2.png" title="Titre de la photo 2"><img src="images/minis/m_photo2.png" alt="Le titre de la photo 2" /></a></li>
<li><a href="images/photo3.png" title="Titre de la photo 3"><img src="images/minis/m_photo3.png" alt="Le titre de la photo 3" /></a></li>
<li><a href="images/photo4.png" title="Titre de la photo 4"><img src="images/minis/m_photo4.png" alt="Le titre de la photo 4" /></a></li>
<li><a href="images/photo5.png" title="Titre de la photo 5"><img src="images/minis/m_photo5.png" alt="Le titre de la photo 5" /></a></li>
<li><a href="images/photo6.png" title="Titre de la photo 6"><img src="images/minis/m_photo6.png" alt="Le titre de la photo 6" /></a></li>
<li><a href="images/photo7.png" title="Titre de la photo 7"><img src="images/minis/m_photo7.png" alt="Le titre de la photo 7" /></a></li>
<li><a href="images/photo8.png" title="Titre de la photo 8"><img src="images/minis/m_photo8.png" alt="Le titre de la photo 8" /></a></li>
<li><a href="images/photo9.png" title="Titre de la photo 9"><img src="images/minis/m_photo9.png" alt="Le titre de la photo 9" /></a></li>
</ul>
<dl id="[b]photo2[/b]">
<dt>Titre de la photo 1</dt>
<dd><img id="[b]big_pict2[/b]" src="images/photo1.png" alt="Photo 1 en taille normale" /></dd>
</dl>
</div>
<div id="[b]galerie3[/b]">
<ul id="[b]galerie_mini3[/b]">
<li><a href="images/photo1.png" title="Titre de la photo 1"><img src="images/minis/m_photo1.png" alt="Le titre de la photo 1" /></a></li>
<li><a href="images/photo2.png" title="Titre de la photo 2"><img src="images/minis/m_photo2.png" alt="Le titre de la photo 2" /></a></li>
<li><a href="images/photo3.png" title="Titre de la photo 3"><img src="images/minis/m_photo3.png" alt="Le titre de la photo 3" /></a></li>
<li><a href="images/photo4.png" title="Titre de la photo 4"><img src="images/minis/m_photo4.png" alt="Le titre de la photo 4" /></a></li>
<li><a href="images/photo5.png" title="Titre de la photo 5"><img src="images/minis/m_photo5.png" alt="Le titre de la photo 5" /></a></li>
<li><a href="images/photo6.png" title="Titre de la photo 6"><img src="images/minis/m_photo6.png" alt="Le titre de la photo 6" /></a></li>
<li><a href="images/photo7.png" title="Titre de la photo 7"><img src="images/minis/m_photo7.png" alt="Le titre de la photo 7" /></a></li>
<li><a href="images/photo8.png" title="Titre de la photo 8"><img src="images/minis/m_photo8.png" alt="Le titre de la photo 8" /></a></li>
<li><a href="images/photo9.png" title="Titre de la photo 9"><img src="images/minis/m_photo9.png" alt="Le titre de la photo 9" /></a></li>
</ul>
<dl id="[b]photo3[/b]">
<dt>Titre de la photo 1</dt>
<dd><img id="[b]big_pict3[/b]" src="images/photo1.png" alt="Photo 1 en taille normale" /></dd>
</dl>
</div>
Et voilà, ça marche
Je le répète : c'est peut-être pas la solution la plus simple et peut-être pas non plus la plus commode, mais elle marche et je lai trouvée seul, alors que je suis pas du tout spécialiste de Javascript. Je m'excuse donc si ça ne respecte pas telle ou telle norme
[/i][/i][/i]
