11521 sujets

JavaScript, DOM et API Web HTML5

Créer un galerie photo qui fonctionne ?

Bonjour,
J'essaie de créer un galerie photos pour mon site depuis plusieurs jours maintenant et, j'ai eu beau parcourir le web de fond en combles, j'ai essayé des dizaines de tutos, passé des heures sur le site de jQuery, visité des forums, rien à faire, je n'y arrive pas.

J'aimerai que lorsqu'on clique sur une des petites images à gauche de ma page, elle s'affiche en plus grand du côté droit (voir capture d'écran.)

Pour le moment ma galerie à l'air de fonctionner mais je m'y suis très mal pris, j'ai créé un lien vers un nouveau html pour chaque image et j'aimerais faire ça bien.

Si une âme charitable veut bien m'aider, je lui serai éternellement reconnaissant.

Archi

upload/1494842631-65702-capturedancran2017-05-15no11..png
Hello,
voici une manière de faire avec Jquery.
code html, 2 vignettes et grande image, et script JS :

<div class="thumbs">
	<img src="img/01.jpg" class="vignette">
	<img src="img/02.jpg" class="vignette">
</div>
<div class="photo">
	<img src="img/01.jpg" class="cible">
</div>
<script src="js/jquery-1.10.1.min.js"></script>
<script>
$(".vignette").click(function() {
  source = $(this).attr('src');
  $(".cible").attr('src',source);
});
</script>


On doit faire plus léger sans Jquery en javascript pur,
Principe : au clic sur une vignette on récupère la source de l'image dans une variable,
on attribue ensuite cette source à l'image principale.
Modifié par farang (16 May 2017 - 14:45)
Sujet clos
Aller à