28172 sujets

CSS et mise en forme, CSS3

Galerie photo et interaction entre les images

Bonjour à tous et félicitation pour ce site.

J'ai un gros souci.
Je désire réaliser une galerie photo, comprenant : 6 photo miniatures de 75px par 75px et, au dessous de celles-ci, une grande photo de 520px par 315px.

J'ai un css externe à ma page html pour les styles, qui me convient, donc, de ce côté-là pas de problèmes.
C'est du côté interaction entre les différentes images que je cale.
Help, please.

Déroulement :
Au lancement de la page, les 6 mini photos apparaissent, et la grande au dessous aussi.
Cette dernière est en fait une des 6 mini photos 75x75, mais agrandit en 520x315.

Ce que je veux, c'est en cliquant sur l'une des autres mini photos, faire apparaitre cette dernière en plus grand, dans la partie inférieure, à la place de l'image initiale.

Toutes mes photos sont donc doubles dans un seul dossier nommé pics, en minis et en grandes : img-thumb.jpg... pour les petites, img-lg.jg... pour les grandes.


Voici mon code, si quelqu'un peut m'indiquer la démarche, sans avoir à relancer la page html pour voir la photo suivante, ce serait bien.



<div id="main_content">
<h2>Galerie 1</h2>
<div class="thumbnails">

<a href="#" class="thumb"><img src="../img/pics/img1-thumb.jpg" alt="" width="75" height="75" /></a>
<a href="#" class="thumb"><img src="../img/pics/img2-thumb.jpg" alt="" width="75" height="75" /></a>
<a href="#" class="thumb"><img src="../img/pics/img3-thumb.jpg" alt="" width="75" height="75" /></a>
<a href="#" class="thumb"><img src="../img/pics/img4-thumb.jpg" alt="" width="75" height="75" /></a>
<a href="#" class="thumb"><img src="../img/pics/img5-thumb.jpg" alt="" width="75" height="75" /></a>
<a href="#" class="thumb"><img src="../img/pics/img6-thumb.jpg" alt="" width="75" height="75" /></a>
<a href="#" class="thumb"><img src="../img/pics/img2-lg.jpg" alt="" width="520" height="315" /></a>

</div>
</div>


Merci d'avance à tout ceux qui prendront la peine de m'aider.
Chris.
Pour faire ce que tu veux sans recharger la page, il n'y a que l'AJAX mais si tu ne t'y connais pas c'est assez compliqué.

Sinon tu peux regarder du côté de lightbox
Ce n'est pas exactement ce que tu recherche, mais c'est très facile à mettre en place (et super à la mode en plus).


Y avait aussi la leetgalery de pr4y qui était bien, mais pour la retrouver maintenant...
Merci Laurie-Anne pour le lien sur lightbox et pour les autres infos.
Mais malheureusement, ce n'est pas ce que je recherche.
Ici, lightbox "ouvre" une autre fenêtre par dessus ma page.

Je voudrais seulement intervertir la grande image avec une autre grande image placée dans le même, le tout en cliquant sur une des petites en haut.

En effet, je ne connais pas Ajax. Mais je vais me renseigner.
D'autres idées peut-être, en attendant ?

Cordialement.
Sans re-chargement de la page, du JavaScript pourrait aussi aller (tout dépends de comment est gérée ta galerie)

En JS, le script appellé au clic sur la miniature replacerait la source de l'image en grand (mais doit être couplé avec des liens en dur qui seront ouvert si JS est désactivé).

AJAX sera utile si tu utilise PHP pour générer la galerie (via une DB ou en naviguant dans les dossiers).
Au vu de ta dernière réponse, le Javascript serait donc plus indiqué.
Pour la gestion de la galerie, c'est on ne peut plu simple.
Toutes les photos sont placées en double dans le même dossier. Photo A en grand + Photo A en petit, Photo B en grand + Photo B en petit ... et ainsi de suite.

Un simple clic sur la miniature B remplace la grande photo A par la grande photo B...

Quel code Javascript peu me permettre cette opération ?
Je crois savoir qu'il faut un fichier JS dans ma racine + insérer des lignes dans le head et dans le body. J'ai lu ça en cherchant par ailleurs.

Mais justement, dans ce cas précis, que dois-je indiquer dans mon code source ?

Thx, keep crossing my fingers. Smiley smile
J'ai trouvé la réponse, en espérant que ça aide qq d'autre :

Avec dreamweaver, utiliser "intervertir image".
Exemple : cliquer sur la mini 1, dans la liste déroulante, choisir la grande image 1 et l'intervertir avec une autre grande, ici la 2.
Faire de même sur toutes les mini photos.

Après, tout dépend si on veux des événements particuliers (onmouseover, on mouseout...)

Dnas mon cas j'ai ceci :

<body onload="MM_preloadImages('../img/pics/img1-lg.jpg','../img/pics/img3-lg.jpg','../img/pics/img4-lg.jpg','../img/pics/img5-lg.jpg','../img/pics/img6-lg.jpg','../img/pics/img2-lg.jpg')">

et plus loin,


<div id="main_content">
<h2>Galerie 1</h2>
<div class="thumbnails">
<a href="#" class="thumb"><img src="../img/pics/img1-thumb.jpg" alt="" name="im1" width="75" height="75" id="im1" onmouseover="MM_swapImage('big','','../img/pics/img1-lg.jpg',1)" /></a>
<a href="#" class="thumb"><img src="../img/pics/img2-thumb.jpg" alt="" name="im2" width="75" height="75" id="im2" onmouseover="MM_swapImage('big','','../img/pics/img2-lg.jpg',1)" /></a>
<a href="#" class="thumb"><img src="../img/pics/img3-thumb.jpg" alt="" name="im3" width="75" height="75" id="im3" onmouseover="MM_swapImage('big','','../img/pics/img3-lg.jpg',1)" /></a>
<a href="#" class="thumb"><img src="../img/pics/img4-thumb.jpg" alt="" name="im4" width="75" height="75" id="im4" onmouseover="MM_swapImage('big','','../img/pics/img4-lg.jpg',1)" /></a>
<a href="#" class="thumb"><img src="../img/pics/img5-thumb.jpg" alt="" name="im5" width="75" height="75" id="im5" onmouseover="MM_swapImage('big','','../img/pics/img5-lg.jpg',1)" /></a>
<a href="#" class="thumb"><img src="../img/pics/img6-thumb.jpg" alt="" name="im6" width="75" height="75" id="im6" onmouseover="MM_swapImage('big','','../img/pics/img6-lg.jpg',1)" /></a>
<a href="#" class="thumb"><img src="../img/pics/img2-lg.jpg" alt="" name="big" width="520" height="315" id="big" /></a>

</div>
</div>

Voilà.
Merci à tous.
Sujet clos
Aller à