Bonjour,
j'ai un problème concernant le tuto de galerie d'images en javascript (http://www.alsacreations.com/tuto/lire/557-galerie-photo-javascript.html)
Mon problème est que quand je clique sur une miniature elle s'ouvre en grand dans une nouvelle page et pas dans le cadre prévu pour !
Voici mon code:
et dans le html :
J'ai aussi ajouter dans le header la ligne qui pointe vers script.js
Modifié par samix (23 Mar 2010 - 15:41)
j'ai un problème concernant le tuto de galerie d'images en javascript (http://www.alsacreations.com/tuto/lire/557-galerie-photo-javascript.html)
Mon problème est que quand je clique sur une miniature elle s'ouvre en grand dans une nouvelle page et pas dans le cadre prévu pour !
Voici mon code:
a écrit :
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
var titre_photo = document.getElementById('photo').getElementsByTagName('dt')[0] ;
// Et enfin le titre de la photo de 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.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
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
et dans le html :
a écrit :
<center><div id="galerie">
<ul id="galerie_mini">
<li><a href="images/photo1.jpg" title="Kery James"><img src="images/minis/m_photo1.jpg" alt="Kery James" /></a></li>
<li><a href="images/medine.jpg" title="Medine"><img src="images/minis/m_medine.jpg" alt="Medine" /></a></li>
<li><a href="images/sniper.jpg" title="Sniper"><img src="images/minis/m_sniper.jpg" alt="Sniper" /></a></li>
<li><a href="images/despo.jpg" title="Despo Rutti"><img src="images/minis/m_despo.jpg" alt="Despo Rutti" /></a></li>
<li><a href="images/photo2.jpg" title="Booba"><img src="images/minis/m_photo2.jpg" alt="Booba" /></a></li>
<li><a href="images/demon_one.jpg" title="Demon one"><img src="images/minis/m_demon_one.jpg" alt="Demon one" /></a></li>
<li><a href="images/mister_you.jpg" title="Mister You"><img src="images/minis/m_mister_you.jpg" alt="Mister You" /></a></li>
<li><a href="images/joey_starr.jpg" title="Joey Starr"><img src="images/minis/m_joey_starr.jpg" alt="Joey Starr" /></a></li>
</ul>
<dl id="photo2">
<dt></dt>
</dl>
<dl id="photo">
<dt>Kery James</dt>
<dd><img id="big_pict" src="images/photo1.jpg" alt="Kery James" /></dd>
</dl>
</div></center>
J'ai aussi ajouter dans le header la ligne qui pointe vers script.js
Modifié par samix (23 Mar 2010 - 15:41)