18041 sujets

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

Galerie photo avec javascript

Bonjour! Mon nom est Jonathan et je solicite votre aide. Je suis nouveaux dans la conception des sites alors svp ne riez pas de ma question Smiley smile

Voici le tutoriel qui m'intéresse: http://www.alsacreations.com/tuto/lire/557-galerie-photo-javascript.html.

En fait c'est le bout de ce code qui me bloque:
<li><a href="images/photo1.png" title="Titre de la photo 1"><img src="images/minis/m_photo1.png" alt="Le titre de la photo 1" /></a></li>

moi j'ai mis cela :
<li><a href="autrepage2.html" title="Titre de la photo 2"><img src="../images/fleur2.jpg" alt="Le titre de la photo 2" /></a></li>

Est-ce que je dois mettre quelque chose dans autrepage2.html??
j'ai regardé d'autre tutoriel et à chaques balises <a href="..." Ceci est une balise pour un lien vers une autre page non? alors pourquoi je vois <a href="images/.../.." quand ce lien est impossible. (ce serait plus tôt le chemin de notre image dans notre ordi) mais href veut dire lien vers une autre page alors je suis bloqué.
Bonjour,

Effectivement, tu débutes. Smiley cligne

Si je comprends bien ton message, tu est bloqué à l'étape initiale, c'est à dire afficher dans la page une liste de vignettes (petites images) qui sont autant de liens vers les grandes images correspondantes.

Je suppose que pour l'instant tu travailles «en local», c'est à dire sur ton poste de travail (ton ordinateur) et pas avec des fichiers sur un serveur web (hébergement)? Dans ce cas, si tu ne l'as pas encore fait, tu dois organiser tes fichiers de travail. Il te faut créer un dossier qui contiendra tous les fichiers nécessaires pour ton site.

Par exemple, tu peux créer un dossier "monsite", dans lequel tu créeras des dossiers "styles" et "images". Tu peux placer tes fichiers HTML dans le dossier "monsite", test grandes images dans "images", et enfin tes miniatures dans un sous-dossier "minis" placé dans le dossier "images". Il faut que tu crées tes grandes images et miniatures à l'avance, et que tu les nomme correctement. Pour les noms de fichiers et de dossiers pour un site web, il est conseillé de proscrire les caractères accentués, les signes de ponctuation et les espaces, et d'utiliser uniquement les lettres de l'alphabet en minuscules et le tiret (-) ou le trait de soulignement (underscore, ou _).

Enfin, il n'est pas du tout interdit de faire un lien vers un fichier autre qu'une page HTML. Le principe de cette galerie d'images, c'est justement que chaque vignette (petite image) est un lien vers la grande image correspondante. À la fin de la première étape du tutoriel, avant de mettre en place le script JavaScript, tu devrais avoir une série de vignettes, une première grande image affichée, et quand tu cliques sur une vignette ça devrait ouvrir la grande image correspondante (et pas une page HTML).
Tout d'abord, merci de prendre le temps de me répondre, c'est très apprécié. J'ai amélioré le rendu final mais cela ne fonctionne pas encore. Voici ce que j'ai fait. J'ai crée un dossier principal qui contient tous les fichiers qui se nomme "site_annie". Dans "site_annie", j'ai crée un dossier "images" qui contient mes images en grand formats. Dans "images" j'ai crée un sous-dossier "minis" qui contient les mêmes photos mais en plus petit.

Également, dans "site_annie" j'ai mis le fichier principal qui contient le code html Le fichier se nomme "photos.html". Et pour finir, toujours dans "site_annie" j'ai mis le fichier "script.js" et "photos.css"

voici le code que j'ai mis pour le html:
<body>
   <div id="galerie"> 
    <ul id="galerie_mini"> 
        <li><a href="images/jonathan_grand.jpg" title="jonathan en grand"><img src="images/minis/jonathan_petit.jpg" alt="jonathan en petit" /></a></li> 
        <li><a href="images/mathieu_grand.jpg" title="mathieu en grand"><img src="images/minis/mathieu_petit" alt="mathieu en petit" /></a></li> 
        <li><a href="images/penguin_grand.jpg" title="penguin en grand"><img src="images/minis/penguin_petit" alt="penguin en petit" /></a></li> 
		 <li><a href="images/serveur_grand.jpg" title="serveur en grand"><img src="images/minis/serveur_petit" alt="serveur en petit" /></a></li> 
	</ul> 
 
     
    <dl id="photo"> 
        <dt>Titre de la photo 1</dt> 
        <dd><img id="big_pict" src="images/jonathan_grand" alt="Photo 1 en taille normale" /></dd> 
    </dl> 
</div> 
        
  
</body>


Pour faire simple comme rendu final, voici ce qui ne fonctionne pas. Je devrais avoir en haut 4 petites images et en une image en gros d'une des 4 petites(la première j'imgagine). Ce que j'ai en haut c'est une petite image avec 3 titres un à côté de l'autre. En bas je n'ai pas de grande image.

Par contre, ce qui fonctionne c'est que si je clique sur la petite image ou sur un des 3 titres, l'image en grand format apparait en bas. Est-ce qu'il me manque quelque chose dans le code?

Merci
Je viens de me rendre compte que j'avais oublié de mettre l'extension .jpg à mes 3 autres photos Smiley confused . Cela fonctionne très bien. Merci de m'avoir appris qu'avec la balise <a> on pouvait mettre autre chose qu'un lien vers l'extérieur ou un ancre dans href.

Merci!
Sujet clos
Aller à