11548 sujets

JavaScript, DOM et API Web HTML5

Gallerie photo en Javascript.

Bonjour,

J'ai suivi votre tuto sur la création d'une gallerie photo en JS. Cependant je débute en JS et j'ai un soucis.

Mon problème étant que quand je met une image pour qu'elle soit en miniature, elle s'affiche bien, mais en taille normal. Et quand je clique dessus, m'affiche en dessous l'image de même taille. 


<!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=utf-8" />
<title>Galerie photo</title>
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
<script type="text/javascript" src="script.js"></script>
</head>

<body>
<div id="galerie">
	<ul id="galerie_mini">
		<li><a href="PhotoLisa.jpg" title="Titre de la photo 1"><img src="PhotoLisa.jpg" alt="Le titre de la photo 1" /></a></li>

		<li><a href="PhotoLisa.jpg" title="Titre de la photo 2"><img src="PhotoLisa.jpg" alt="Le titre de la photo 2" /></a></li>
		<li><a href="images/photo3.png" title="Titre de la photo 3"><img src="images/minis/m_photo3.png" alt="Le titre de la photo 3" /></a></li>
		<li><a href="images/photo4.png" title="Titre de la photo 4"><img src="images/minis/m_photo4.png" alt="Le titre de la photo 4" /></a></li>

		<li><a href="images/photo5.png" title="Titre de la photo 5"><img src="images/minis/m_photo5.png" alt="Le titre de la photo 5" /></a></li>
		<li><a href="images/photo6.png" title="Titre de la photo 6"><img src="images/minis/m_photo6.png" alt="Le titre de la photo 6" /></a></li>
		<li><a href="images/photo7.png" title="Titre de la photo 7"><img src="images/minis/m_photo7.png" alt="Le titre de la photo 7" /></a></li>

		<li><a href="images/photo8.png" title="Titre de la photo 8"><img src="images/minis/m_photo8.png" alt="Le titre de la photo 8" /></a></li>
		<li><a href="images/photo9.png" title="Titre de la photo 9"><img src="images/minis/m_photo9.png" alt="Le titre de la photo 9" /></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>


Voilà, merci de m'aider et bon WE à tous. Smiley smile
Salut,

Ton problème est là :
<li><a href="PhotoLisa.jpg" title="Titre de la photo 1"><img src="PhotoLisa.jpg" alt="Le titre de la photo 1" /></a></li>

Le code proposé par la tutoriel ne prend pas en charge la génération des miniatures. C'est à toi de créer manuellement une miniature pour chaque image, et de construire ensuite tes <li> comme ça :
<li>
    <a href="[b]adresse_de_la_photo_en_taille_réelle.jpg[/b]" title="Titre de la photo 1">
        <img src="[b]adresse_de_la_photo_en_miniature.jpg[/b]" alt="Le titre de la photo 1" />
    </a>
</li>

Modifié par marcv (05 Apr 2009 - 09:59)
Sujet clos
Aller à