18073 sujets

Questions générales et questions de débutants

[Résolu] Tuto galerie photo en javascript

Bonsoir

je cherhce depuis pas mal de temps à faire une sorte de diapo pour mes photos de voyage. Je viens de consulter ce tuto. Je reproduis les codes : une page html, une css et une javascript (j'ai supposé car jamais utilisé de java).

Je n'ai pas du tout le resultat du tuto rien que pour le css !

Dou cela peut il provenir ?

Merci d'avance Hélly
Modifié par helly (20 Nov 2005 - 20:09)
Modérateur
Bonsoir Helly,

Pourrais-tu nous donner l'url de ta page pour voir ce qui ne va pas ?

Sinon je vais devoir retirer la poussière de ma boule de cristal. Smiley smile
Je ne l'ai pas encore transférer :
[code]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Diapo Costa Rica</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="pagefoto2.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="../photos/abdel1.jpg" title="abdel"><img src="../photos/abdel.jpg" alt="mini abdel" /></a></li>

		<li><a href="../photos/cascade1.jpg" title="cascade"><img src="../photos/cascade.jpg" alt="cascade" /></a></li>
		<li><a href="../photos/croco1.jpg" title="croco"><img src="../photos/croco.jpg" alt="crocodile" /></a></li>
		<li><a href="../photos/canal1.jpg" title="canal"><img src="../photos/canal1.jpg" alt="canaux" /></a></li>

		<li><a href="../photos/adelfa1.jpg" title="adeline"><img src="../photos/adelfa.jpg" alt="adeline" /></a></li>
		<li><a href="../photos/adelshak1.jpg" title="milk shake"><img src="../photos/adelshak.jpg" alt="shake" /></a></li>
		<li><a href="../photos/arenal1.jpg" title="arenal"><img src="../photos/arenal.jpg" alt="volacan" /></a></li>

		
	</ul>

	
	<dl id="photo">
		<dt>Titre de la photo 1</dt>
		<dd><img id="big_pict" src="images/photo1.png" alt="Photo 1 en taille normale" /></dd>
	</dl>
</div>


</body>
</html>


ca, c'est la page html

[/code]
/* CSS Document */

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 ;
}
ca, la feuille css

et 
// JavaScript Documentfunction 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 = displayPics;
// Il ne reste plus qu'à appeler notre fonction au chargement de la page
la feuille java

Merci de votre aide

Hélly
[/i]
Administrateur
En passant, je rappelle que dans la langue française, "galerie" s'écrit avec un seul "l" Smiley cligne
Modérateur
Bonjour Helly,

Est-ce ta page est en ligne afin qu'on puisse voir si tu n'aurais pas fais une erreur lorsque tu as copié ton code ? Nous donner l'url aiderait grandement.

Par exemple, dans le code que tu nous montre, je vois dans le fichier javascript ceci :


// JavaScript Documentfunction displayPics()


Il ne faut pas que function displayPics() soit sur une ligne de commentaire. Fais un saut de ligne entre Document et function. Comme ceci :


// JavaScript Document
function displayPics()


Tu utilise également un doctype XHTML 1.1, mais le tutorial lui est en XHTML 1.0. Cela pourrait peut-être causer des variations. D'ailleurs, tu devrais retourner en XHTML 1.0, voir l'article XHTML 1.1, beaucoup de bruits pour rien.
Modifié par Merkel (03 Nov 2005 - 16:41)
Modérateur
En attendant que je regarde de plus près ton code pour déceler le problème précis, j'ai peut-être une idée du coupable.

Tu es sur un hébergeur gratuit, du moins, ca en a l'air. Les hébergeurs ajoutent à l'occasion du code après le </html>. Regarde le code source généré une fois en ligne, tu vas voir de quoi je parles. Ton hébergeur ajoute non pas seulement des tags html étrangent, mais aussi du Javascript. Peut-être que ce Javascript vient écraser ton onload déclaré dans ton script.js. Je n'ai pas regardé en détails, c'est juste une prédiction.

Pour être certain que le problème ne vient pas de là, essaye ton code localement, sur ton ordinateur, et non sur ton hébergeur.

Je vais me pencher sur ton problème un peu plus tard, là je dois partir.
Modérateur
Bon, déjà, ton fichier CSS n'est pas chargé, car il est introuvable. Il ne se trouve pas dans le même répertoire que la page.


<link href="pagefoto2.css" rel="stylesheet" type="text/css"/>


Ce fichier n'existe pas. Met le fichier CSS dans le même répertoire, ou change la déclaration de localisation de ton fichier css, dans le href.
Modifié par Merkel (04 Nov 2005 - 14:38)
Salut

alors en fait, tu me sauve le truc. Ma page, et je n'avais pas vu çà, s'appelait pagefoto .css au lieu de pagefoto.css (un espace et ca fait tout foiré !!)

Alors, je l'ai transféré sur le site : qu'est ce que tu en pense ?

Hélly
Modérateur
Ce que je pense de ton diaporama ?

En fait, je trouve que l'image de grande taille est beaucoup trop grosse. Lorsque je clique sur une miniature, rien ne se passe (le navigateur télécharge la lourde image). Je dois attendre quelques secondes avant que la grande image change pour la bonne. En plus, il faut cliquer sur une image, et scroller dans tous les sens pour consulter la grande.

Bien que le script soit intéressant au niveau technique, je trouve que ce n'est pas très ergonomique, du moins, pas avec les tailles d'images que tu as choisis. Je préfère les galleries où on clique sur une image pour aller à une seconde page, afin de voir les détails, avoir des liens précédente-suivante et un bouton retour à la gallerie.

Sinon, si tu tiens à conserver ce diaporama de cette façon, réduis la taille des images pour que je puisse me faire une nouvelle opinion. Smiley smile

N'oublis pas non plus de retourner en XHTML 1.0. Si tu fais du XHTML, c'est pour respecter les normes. Eh bien en ayant un doctype XHTML 1.1 mais en livrant ton document en text/html, tu ne respecte pas cette norme. Smiley smile
Modifié par Merkel (04 Nov 2005 - 18:22)
Alors, je suis d'accord avec toi. La, ce n'est pas la version finale car taille et disposition ne vont pas.En fait , je voulais deja arriver a ce que ca fonctionne (grace à ton aide, je t'en remercie.)

Par contre, je ne comprend pas l'histoire de la declaration. En fait, je faisais un copié collé d'un exo d'un autre site ressource.

Donc, je dois mettre toutes mes pages en XHTML 1.0 ? Juste changer l'entete dans toutes mes pages.
[code]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >


Est ce que le fait de changer juste le 1 en 0 suffit ?

Merci Hélly
Modérateur
Pour le doctype, tu peux mettre :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">


Bonne journée
Sujet clos
Aller à