Bonjour à tous,
J'ai lu les innombrables sujets où sont exposés les problèmes rencontrés avec ce tuto (je suis remontée à plus d'un an il me semble...)
http://css.alsacreations.com/Tutoriels-JavaScript/galerie-photo-javascript
; mon problème est réccurent semble t'il: lorsqu'on clique sur les photos, elles s'affichent dans une nouvelle page blanche.
J'ai essayé tous les "trucs" donnés aux diverses personnes qui ont eu ce problème, mais aucun ne l'a résolu chez moi.
Vous pouvez voir là la page en question ici: http://keegan.diboo.net/TEST.html
Le code de ma page est comme ceci:
Mon javascript est:
Et il y a également mon code CSS pour la mise en forme dans un autre fichier, c'est le même que celui du tuto sauf que j'ai changé la largeur de la fenêtre!
Si quelqu'un peut m'éclairer, ça serait très gentil...
Merci à tous,
Adeline[/i]
Modifié par didou47 (28 Mar 2007 - 08:54)
J'ai lu les innombrables sujets où sont exposés les problèmes rencontrés avec ce tuto (je suis remontée à plus d'un an il me semble...)
http://css.alsacreations.com/Tutoriels-JavaScript/galerie-photo-javascript
; mon problème est réccurent semble t'il: lorsqu'on clique sur les photos, elles s'affichent dans une nouvelle page blanche.
J'ai essayé tous les "trucs" donnés aux diverses personnes qui ont eu ce problème, mais aucun ne l'a résolu chez moi.
Vous pouvez voir là la page en question ici: http://keegan.diboo.net/TEST.html
Le code de ma page est comme ceci:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<link href="galerie.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="galerie" >
<ul id="galerie_mini">
<li><a href="vio-steele-bleu8s1.jpg" title="8 semaines"><img src="vio-steele-bleu8s1B.jpg" alt="8 semaines" /></a></li>
<li><a href="vio-steele-bleu8s4.jpg" title="8 semaines"><img src="vio-steele-bleu8s4B.jpg" alt="8 semaines" /></a><a href="vio-steele-bleu8s2.jpg" title="8 semaines"><img src="vio-steele-bleu8s2B.jpg" alt="8 semaines" /></a></li>
<li><a href="vio-steele-bleu8s3.jpg" title="8 semaines"><img src="vio-steele-bleu8s3B.jpg" alt="8 semaines" border="0" /></a><a href="photo 054.jpg" title="9 semaines"><img src="photo 054B.jpg" alt="9 semaines" /></a></li>
<li></li>
<li></li>
<li></li>
<li><a href="photo 076.jpg" title="9 semaines"><img src="photo 076B.jpg" alt="Le titre de la photo 7" /></a><a href="photo 063.jpg" title="9 semaines"><img src="photo 063B.jpg" alt="9 semaines" /></a></li>
<li><a href="photo 092.jpg" title="9 semaines"><img src="photo 092B.jpg" alt="9 semaines" /></a><a href="photo 107.jpg" title="9 semaines"><img src="photo 107B.jpg" alt="9 semaines" /></a></li>
<li></li>
</ul>
<dl id="photo">
<dt>Keegan 8/9 semaines</dt>
<dd><img id="big_pict" src="vio-steele-bleu8s1.jpg" alt="Photo 1 en taille normale" /></dd>
</dl>
</div>
</body>
</html>Mon javascript est:
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[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
return false; // Et pour finir on inhibe l'action réelle du lien
};
}
}
window.onload = function(){
montre();displayPics();
}
// Il ne reste plus qu'à appeler notre fonction au chargement de la page
Et voilà votre galerie fin prête à être visitée, vous pouvez voir un exempleEt il y a également mon code CSS pour la mise en forme dans un autre fichier, c'est le même que celui du tuto sauf que j'ai changé la largeur de la fenêtre!
Si quelqu'un peut m'éclairer, ça serait très gentil...
Merci à tous,
Adeline[/i]
Modifié par didou47 (28 Mar 2007 - 08:54)
