Bonjour bonjour
Je souhaite créer un galerie en javascript affichant une description et une grande image lorsqu'on click sur une miniature.
On voit 3élements.
- A gauche le block affichant la grande image et son titre
-A droite un block description
-En bas un tableau de miniature(on voit pas tout car ya une scrollbar)
Pour le moment grâce à des tuto j'ai réussis à afficher les miniatures et les grande photos.
Donc comme on peut le remarquer il y a plusieurs minigalerie chacune correspondant a un type.
Chaque type s'affiche comme la photo ci-dessus.
Donc un type est composé de plusieurs modèles représenté par les photos.
Chacune de ces photos aura une description qui lui est propre.
Voici donc le javascript tiré de vos tuto pour l'apparition de ces images.
Mon probleme viens donc des descriptions.
J'affiche correctement les grande images en cliquant sur les miniatures cependant j'ai du mal avec ces fameuses descriptions.
Apres moulte recherche je continue de couler.
Avant de m'embarquer dans la realisation de fonction pour structurer un tableau avec mes description j'aimerai savoir comment recuperer le numero de l'element sur lequel on click, ou son titre.
Car dans la boucle for j'arrive a récupérer avec alert(nbi); mon nombre d'objet qui commence lui a 1. avec alert(i); je vois bien mes i s'incrémenter.
Mais si je place ces alert apres le liens.onclick = function()
la j'ai des undefine car mes objet ne sont pas initialiser. (sauf pour le alert(nbi); evidement)
Sauriez vous me renseigner ?
Je précise que je commence le javascript. A force de lire les tuto je comprend ce que le code me dit cependant je ne suis pas encore en mesure de savoir l'utiliser correctement et du coup niveau création de fonction ajout d'éléments dans les script c'est durdur.[/i]
Je souhaite créer un galerie en javascript affichant une description et une grande image lorsqu'on click sur une miniature.
On voit 3élements.
- A gauche le block affichant la grande image et son titre
-A droite un block description
-En bas un tableau de miniature(on voit pas tout car ya une scrollbar)
Pour le moment grâce à des tuto j'ai réussis à afficher les miniatures et les grande photos.
div id="affichage">
<div class="photophp">
<?php if($type=="trucmuche"){?>
<dl id="photo">
<dt> trucmuche1</dt>
<dd><img id="bigphoto" src="photo/trucmuche1.jpg"/></dd></dl><?php } ?>
<?php if($type=="truc"){?>
<dl id="photo">
<dt> truc1</dt>
<dd><img id="bigphoto" src="photo/truc1.jpg"/></dd></dl><?php } ?>
<?php if($type=="machin"){?>
<dl id="photo">
<dt> machin1</dt>
<dd><img id="bigphoto" src="photo/machin1.jpg"/></dd></dl><?php } ?>
</div>
<div id="description">
<?php if($type=="trucmuche"){?>
<p align="center" id="title">trucmuche1</p>
<p id="desc">Le trucmuche corp un possede une couleur vert</p><?php }?>
<?php if($type=="machin"){?>
<p align="center" id="title">machin1</p>
<p id="desc">Le machin possede une couleur rose</p><?php }?>
<?php if($type=="truc"){?>
<p align="center" id="title">truc1</p>
<p id="desc">Le truc possede une couleur bleu</p><?php }?>
</div>
</div></div>
<table id="mini">
<tr><?php if($type=="trucmuche"){?>
<td><li><a href="photo/trucmuche1.jpg" title="trucmuche1"><img src="photo/mini_1.jpg" value="trucmuche1" /></a></li></td>
....
<?php } if($type=="truc"){ ?>
<td><li><a href="photo/porte1.jpg" title="porte1"><img src="photo/miniporte1.jpg" value="truc1" /></a></li></td>
<?php } if($type=="machin"){ ?>
<td><li><a href="photo/machin1.jpg" title="machin1"><img src="photo/minmachin1.jpg" value="machin1" /></a></li></td>
<?php } ?></tr>
</table>Donc comme on peut le remarquer il y a plusieurs minigalerie chacune correspondant a un type.
Chaque type s'affiche comme la photo ci-dessus.
Donc un type est composé de plusieurs modèles représenté par les photos.
Chacune de ces photos aura une description qui lui est propre.
Voici donc le javascript tiré de vos tuto pour l'apparition de ces images.
function displayPics()
{
var photos = document.getElementById('mini') ; // On récupère l'élément mini
var liens = photos.getElementsByTagName('a') ; // On récupère tous les liens contenu dans mini (tag nous fais recup une tab)
var bigphoto = document.getElementById('bigphoto') ; // On recupere l'elem bigphoto(image)
var titre_photo = document.getElementById('photo').getElementsByTagName('dt')[0] ; // titre de la photo de bigphoto
var nbi = liens.length;
for(var i = 0 ; i < nbi ; i++)// Une boucle des liens contenu dans mini
{
liens[i].onclick = function()// Au clique sur ces liens
{
bigphoto.src = this.href ; // On change l'attribut src de l'image en le remplaçant par la valeur du lien
bigphoto.alt = this.title ; // On change son titre
titre_photo.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 Mon probleme viens donc des descriptions.
J'affiche correctement les grande images en cliquant sur les miniatures cependant j'ai du mal avec ces fameuses descriptions.
Apres moulte recherche je continue de couler.
Avant de m'embarquer dans la realisation de fonction pour structurer un tableau avec mes description j'aimerai savoir comment recuperer le numero de l'element sur lequel on click, ou son titre.
Car dans la boucle for j'arrive a récupérer avec alert(nbi); mon nombre d'objet qui commence lui a 1. avec alert(i); je vois bien mes i s'incrémenter.
Mais si je place ces alert apres le liens.onclick = function()
la j'ai des undefine car mes objet ne sont pas initialiser. (sauf pour le alert(nbi); evidement)
Sauriez vous me renseigner ?
Je précise que je commence le javascript. A force de lire les tuto je comprend ce que le code me dit cependant je ne suis pas encore en mesure de savoir l'utiliser correctement et du coup niveau création de fonction ajout d'éléments dans les script c'est durdur.[/i]
