Discussion :

[anti-conformiste]

Bonjour,

J'ai une question qui paraitra surement très simple aux plus avertis.

Je souhaite reproduire le comportement de cette page ; lorsqu'on clique sur les vignettes, la grande image change sans afficher de popup.

Afin de ne pas surcharger ma page en retelechargeant des choses qui existeraient déjà, je souhaite savoir comment obtenir un tel effet. (est-il possible d'obtenir un tel comportement rien qu'avec jquery-min.1.x.x.js ?)

Merci d'avance.

[Michaeljackfan]

Salut,

Ce comportement est très simple à reproduire. JQuery-mini est suffisant. C'est même gérable sans JQuery.

Il te faut une balise IMG pour la grande image, plus une par petite image.
Ensuite, tu associes l'action onclick des petites images à une fonction qui va permettre de retrouver l'url de la grande image associée, et tu l'envoies à l'attribut src de la grande image.
Cette url peut être passée en argument à la fonction, ou se deviner à partir de l'attribut id de la petite image qui appel la fonction, ou à partir de l'attribut src de la petite image.

Pour les grandes images, tu peux...
... créer chaque image en double (petite et grande), et changer directement l'attribut src de la grande image pour qu'il pointe vers un autre fichier sur le serveur. Cela aura pour effet de charger l'image après le clique.
... précharger les images avec l'objet new Image, puis aller rechercher l'image appropriée dans le tableau des images pré-chargées.
... ne faire que des grandes images, et laisser le navigateur les redimensionner pour les afficher en petit.

Chaque méthode a ses défauts et ses inconvénients.
Dans tous les cas, il te faudra simplement modifier l'attribut src de la grande image suite à l'appel d'une fonction par un évènement onclick de l'une des petites images.

[anti-conformiste]

Merci pour ta réponse,

Je suis bien d'accord avec toi, mais en accédant au code source de la p. exemple ci-dessus, je suis dubitatif, car il n'y a aucun appel javascript !!!

cf code ci-sessous :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
 
<div class="blocimg">
 
		<div class="mainimg">
			<THELIA_img type="IMAGE" nb="3" produit="#ID">
            	<img src="#IMG" alt="#TITRE" title="#TITLE" />
            </THELIA_img>
		</div>
		<T_vignette>
		<div class="thumbnails">
			<THELIA_vignette type="IMAGE" produit="#ID" debut="3" hauteur="90" largeur="90">
				<THELIA_ZOOM_VIGNETTE type="IMAGE"  num="1" id="#ID">
                <a href="#IMG">
				</THELIA_ZOOM_VIGNETTE>
                <img src="#IMG" alt="#TITLE" title="#TITLE"/>
				</a>
            </THELIA_vignette>
		</div>
		</T_vignette>
		<//T_vignette>
 
	</div>

[Michaeljackfan]

Il y a un appel à Javascript. Mais plutôt que de mettre dans chaque balise l'attribut onclick, ils ont préféré rechercher les différentes balises dans la page, puis attribuer une fonction à l'évènement.

Tu peux le voir à la page suivante :
http://boutique.deer-and-doe.fr/template/js/script.js

Ce sont les lignes suivantes qui vont rechercher chaque balise <A> des vignettes pour changer le comportement d'un clique.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
$(".product .vignettes a").click(function(e){
   		e.preventDefault();
   		$(".product .main_image img").attr("src", $(this).attr("href"));
   });

Si l'on décompose le code :

$(".product .vignettes a").click(function(e)
Lors d'un clique sur un lien contenu dans les .vignettes, eux-même contenus dans .product

e.preventDefault();
Empêche le comportement normal du lien (afin d'éviter qu'il n'ouvre une nouvelle page)

$(".product .main_image img").attr("src", $(this).attr("href"));
Recherche l'image contenue dans .main_image, lui-même contenu dans .product, et remplace le contenu de son "src" par le contenu de l'attribut "href" du lien cliqué.


Et tu peux voir dans le bloc précédent la façon dont ils pré-chargent les images :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
$(".product .vignettes a").each(function() {
		var image = $('<img />').attr('src', $(this).attr("href"));
	});

Pour chaque lien, ils créent une variable "image" dont l'attribut "src" est rempli avec l'attribut "href" du lien.
L'image est créée et se charge en mémoire, mais comme elle n'est pas rattachée à l'élément "document" (pas de document.appendChild(image)), elle ne s'affiche pas.

[anti-conformiste]

Merci d'avoir pris le temps de m'expliquer tout ça, c'est vraiment très gentil.

En fait, je supposais bien au début qu'il s'agissait du script nivoSlider, mais j'ai fait machine arrière pour 2 raisons :

1 - Ni l'addon Deobfuscator de FF ni le debugger de script de l'inspecteur Web de Safari ne montraient un appel à ce script ; juste un breakpoint dans jquery min-1.x.x.js lorsque je cliquais sur les vignettes... je suppose que je ne me serts pas bien de ces outils.

2 - Ensuite, et c'est une belle erreur de ma part, que je comprends grâce à toi, j'avais désactivé tous les styles avec Webdevelopper sous FF, pensant que ça supprimerait de facto l'appel javascript, mais cette fonction impacte juste la mise en forme, le visuel. Pareil sous Safari en enlevant les classes ".product" et ".vignettes" dans le debugger, je pensais que ça impacterait aussi le DOM et pas que l'aspect visuel.

Conclusion : il faut bien comprendre le fonctionnement de ces outils de debuggage avant de tirer des conclusions hâtives.

[ABCIWEB]

2 - Ensuite, et c'est une belle erreur de ma part, que je comprends grâce à toi, j'avais désactivé tous les styles avec Webdevelopper sous FF, pensant que ça supprimerait de facto l'appel javascript

Perso pour vérifier le comportement sans javascript j'emploie la méthode radicale (dans FF -> outils -> options -> contenu -> désactiver la case "Activer javascript").

[anti-conformiste]

Perso pour vérifier le comportement sans javascript j'emploie la méthode radicale (dans FF -> outils -> options -> contenu -> désactiver la case "Activer javascript").

Béh, oui, c'est ce que j'ai fait aussi, et il est important de préciser que ça fonctionne après avoir rafraichi la page. (ce qui n'est pas le cas pour le css)
C'est la source de cette confusion, si ça peut éviter la même fausse route à d'autres...