Salut,
Comme il y a toujours plein de post qui en parle j'ai testé moi aussi un peu cette galerie et j'ai rajouté un texte a coté des images.
bon alors je previens les membres du jury. je n'ai peut être pas choisi la meilleure methode, j'en est trouvé une qui marche et qui puisse faire acte d'exemple.
en gros j'ai rajouté un dd#texte que j'ai placé a coté de l'autre mes dd sont en float:left; pour cela. un overflow:hidden a été rajouté pour compenser.
et pour le texte je ne savais pas où le placer il n'y avait pas de balise/attribut evidente comme l'attribut title de a pour ça.
finalement, je l'ai mis dans un tableau dans le javascript. j'ai rajouté un id au lien du div minigallerie. cet id me sert qui d'indice dans le tableau du texte correspondant.
dans le HTML on trouve le CSS
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859">
<title> Gallerie </title>
<style>
div#galerie
{
width: 820px ;
background: #eed ;
border: 1px solid #dcb ;
padding: 15px ;
margin: 15px 30px ;
text-align: center ;
font: 0.9em Georgia, serif ;
overflow:hidden;
}
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 ;
float:left;
}
dd#texte {
width:250px;
text-align:right;
padding: 0 0 0 30px;
}
dl#photo img
{
border: 1px solid #dcb ;
}
</style>
<script type="text/javascript" src="galleriealsa.js"></script>
<script>
</script>
</head>
<body>
<div id="galerie">
<ul id="galerie_mini">
<li><a id="0" href="diaporama/1996_yakutake.jpg" title="comete yakutake 1996"><img src="diaporama/min/1996_yakutake_mini.jpg" alt="Le titre de la photo 1" /></a></li>
<li><a id="1" href="diaporama/2003_05_06_transitmercure.jpg" title="Titre de la photo 2"><img src="diaporama/min/2003_05_06_transitmercure_mini.jpg" alt="Le titre de la photo 2" /></a></li>
<li><a id="2" href="diaporama/hale-boppmin.jpg" title="Titre de la photo 3"><img src="diaporama/min/hale-boppmin_mini.jpg" alt="Le titre de la photo 3" /></a></li>
<li><a id="3" href="diaporama/lune1_28_10_04.jpg" title="Titre de la photo 4"><img src="diaporama/min/lune1_28_10_04_mini.jpg" alt="Le titre de la photo 4" /></a></li>
<li><a id="4" href="diaporama/lune2_28_10_04.jpg" title="Titre de la photo 5"><img src="diaporama/min/lune2_28_10_04_mini.jpg" alt="Le titre de la photo 5" /></a></li>
</ul>
<dl id="photo">
<dt>Titre de la photo 1</dt>
<dd><img id="big_pict" src="diaporama/1996_yakutake.jpg" alt="Photo 1 en taille normale" /></dd>
<dd id="texte"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut eleifend. Pellentesque eget mi in ligula rutrum commodo. Vestibulum posuere, mi ut feugiat lobortis, arcu urna dignissim elit, eu vulputate sem dui ultrices arcu. Sed eros. Integer justo. In hac habitasse platea dictumst. Phasellus nec ligula. Aliquam elementum nisi at arcu. Cras vitae massa. Nunc iaculis, metus id rutrum dapibus, lectus velit porta lectus, vel gravida diam diam sed lacus. Phasellus dictum ultrices tellus. Vivamus sodales. Integer semper auctor ante. Cras leo. Nam accumsan diam id ipsum. Ut tortor. Curabitur posuere fermentum ipsum. </dd>
</dl>
</div>
</body>
</html>
et mon js
function displayPics()
{
var tabtexte = ["Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut eleifend. Pellentesque eget mi in ligula rutrum commodo. Vestibulum posuere, mi ut feugiat lobortis, arcu urna dignissim elit, eu vulputate sem dui ultrices arcu. Sed eros. Integer justo. In hac habitasse platea dictumst. Phasellus nec ligula. Aliquam elementum nisi at arcu. Cras vitae massa. Nunc iaculis, metus id rutrum dapibus, lectus velit porta lectus, vel gravida diam diam sed lacus. Phasellus dictum ultrices tellus. Vivamus sodales. Integer semper auctor ante. Cras leo. Nam accumsan diam id ipsum. Ut tortor. Curabitur posuere fermentum ipsum.","id rutrum dapibus, lectus velit porta lectus, vel gravida diam diam sed lacus. Phasellus dictum ultrices tellus. Vivamus sodales. Integer semper auctor ante.","blablabla","il etait une fois l'espace","tiintin et milou voyage"];
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
var titre_photo = document.getElementById('photo').getElementsByTagName('dt')[0] ;
// Et enfin le titre de la photo de taille normale
var texte = document.getElementById('texte');
// 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
big_photo.alt = this.title; // On change son titre
titre_photo.firstChild.nodeValue = this.title; // On change le texte de titre de la photo
texte.innerHTML = "" + tabtexte[this.id];
return false; // Et pour finir on inhibe l'action réelle du lien
};
}
}
window.onload = displayPics;
je vais le faire sur le champ !