C’est un petit truc que j’ai vu déjà à plusieurs reprises. La vignette multi-images permet d’afficher plusieurs images d’un seul produit sur une seule zone en passant simplement la souris dessus. C’est un peu difficile à comprendre comme ça, mais je vous conseille d’aller jeter un coup d’oeil à une page de Zappos et de passer votre souris sur les vignettes produits, vous verrez très bien ce que je veux dire.
Avantage : donner plus d’informations à l’internaute sur le produit sans l’obliger à aller jusqu’à la page produit. L’effort cognitif demandé est plutôt faible et l’apprentissage du système extrêmement rapide puisqu’il suffit simplement de passer la souris sur une vignette pour découvrir « le truc ».
Inconvénient : le temps de téléchargement plus long, puisque toutes les images d’un seul produit sont téléchargées en même temps.
PS : si quelqu’un connait le script de cette fonctionnalité, qu’il n’hésite pas à le partager avec nous en commentaire 
Oui, ça prend de la place
Il ne faut pas croire que c’est plus long que si c’était découpé en plusieurs images. Au contraire, ça prendrait plus de temps au navigateur de télécharger 8 petites images (les différentes vignettes) qu’une seule un peu plus grosse. Ce qui prend du temps c’est établir une connexion pour récupérer le(s) fichier(s) que de transféré ce dernier une fois la connexion établie. Bien sur, il y a une taille limite de fichier au delà de laquelle l’inverse est vrai. Mais dans ce cas, 39Ko, c’est très raisonnable.
Et la fonction est en effet très pratique
C’est plus long que si on avait une seul image par vignette. Là, il semblerait que toutes les images de toutes les vignettes soient téléchargées à l’affichage de la page.
Salut,
Pour le fonctionnement, il s’agit d’une image que tu déplace en CSS. Tu modifie la propriété background de ton élément avec « background-image:… » et tu lui donne une position d’affichage dans l’image. C’est très pratique !
P.S : Je cherche un exemple concret de code…
Salut,
En fait il faut utiliser la technique des sprites CSS, excellent tuto ici : http://www.alsacreations.com/tuto/lire/1068-sprites-css-background-position.html
ou là :
http://www.pompage.net/pompe/sprites/
@Juan : merci pour le tuto
[...] This post was mentioned on Twitter by Camille Jourdain, Gregory Janssens 【ツ】, uptilab, Actinium, Gaëtan Compigni and others. Gaëtan Compigni said: Affichez plus d’images dans vos listes produits http://is.gd/eokgy [...]
Même principe sur http://www.izneo.com/ : l’enjeu est de pouvoir feuilleter la bd comme chez son libraire. La techno est plutôt en flash ici, avec pour avantage d’afficher le chargement des pages en cours, et le désavantage d’être ilisible sur iPhone…
J’aime bien la technique des sprites CSS. Pour les adeptes de la découpe en plusieurs images, il y a également celle du téléchargement en parallèle au travers de domaines multiples type static1.example.org & static2.example.org
Plus d’infos ici http://developer.yahoo.com/performance/rules.html#split
Bonjour,
Je pense, qu’en réalité, il y a du js quelque part. Effectivement, la technique des sprites css est utilisée, en revanche lorsque je regarde le code source je ne vois pas différentes zones réactives sur l’image du produit (cf les exemples précédemment cités).
Lorsqu’on regarde avec Firebug, on peut voir que la position de l’image du produit change à chaque mouvement de souris. Il doit y avoir du js qui définit des zones réactives sur l’image du produit et qu’en fonction de l’emplacement de la souris le background-position de l’image évolue.
Je sais pas si j’ai été super clair dans mes explications… Mais si quelqu’un trouve la solution uniquement en css, je suis preneur.
@Sylvain : Moi aussi !
Sylvain :
il y a bien un code JS :
z.SearchMultiview=function(c){if(!(this instanceof z.SearchMultiview))return new z.SearchMultiview(c);this.styles={};var f=this;c.mouseover(function(b){b=$(b.target);var a=b.parents(« a »);if(b.hasClass(« product »))b=b;else if(a.hasClass(« product »))b=a;else return;if(!b.find(« .blinkyBS »).length){a=b[0].className.split(« style- »)[1].split( » « )[0];f.styleReady(a)?f.setupScratchImage(a,b):f.startImageRequest(a,b)}})};
z.SearchMultiview.prototype={styleReady:function(c){return this.styles[c]==undefined||this.styles[c].ready==false?false:true},setupScratchImage:function(c,f){var b=this.styles[c];if(!b.listening){var a=f.find(« .productImage »).offset(),d=Math.ceil(170/(b.height/198));f.find(« .productImage »).mousemove(function(e){e=Math.floor((e.pageX-a.left)/d);$(this).css(« background-position », »0px - »+e*198+ »px »)}).mouseleave(function(e){e=e.pageY-a.top;!(e=198)&&$(this).css(« background-position », »top left »)});
b.listening=true}},startImageRequest:function(c,f){if(this.styles[c]==undefined){this.styles[c]={ready:false};var b=new Image,a=this;b.onload=function(){var d=a.styles[c];d.height=this.height;d.listening=false;d.ready=true;f.find(« .productImage »).css({height: »198px »,background: »url(« +this.src+ ») bottom left »}).end().find(« img »).remove()};b.src= »http://www.zappos.com/images/z/ »+c.charAt(0)+ »/ »+c.charAt(1)+ »/ »+c.charAt(2)+ »/ »+c+ »-s-MVTHUMB.jpg »}}};
en full css je ne sais pas si c’est possible.
@Towma : Merci bien !
Oui, c’est pas mal mais ça aurait été mieux d’avoir une visionneuse qui fait défiler les images dans un ordre précis au passage de la souris plutôt que d’avoir des images au hasard du déplacement de la souris au survol de la miniature.
C’est un peu brouillon.
Je dois agiter mon curseur un peu dans toutes les directions pour voir toutes les images.
Oui, ça utilise un sprite par produit, ce qui est un poil plus long à charger que les descentes de catalogue standard parce que les images sont fatalement plus grosses, mais question perfs c’est pas plus coûteux que ça. Et un script pour décaler le sprite au roll, qui franchement doit pas être très violent (ou alors il est mal pensé).
En full CSS ça doit être possible, avec des bidouilles prises de tête genre http://www.romancortes.com/ficheros/meninas.html mais bon à un moment on se dit à quoi bon ? =)
@STPo :
Pas mal ton exemple mais le code source pique les yeux ! haha…
Sinon iPhoto sur mac présente les albums photos dans ce style. Sur Me.com les albums sont présenter en html de la même manière.
Un coup de jquery ça doit pas être sorcier pour peu qu’on maitrise un poil le js.
Le chargement du sprite se fait au survol de l’image, du coup la bande passante n’est pas utilisée pour rien. C’est malin et comme ils ont une bonne infrastructure ça ne pénalise pas l’internaute.
Au passage, pour faire vos css sprites : http://spriteme.org/ A aujourd’hui je n’ai pas trouvé mieux.
Moi ce qui me fait flasher dans cette manière de faire, c’est le boulot photo et traitement arrière. Ca à du être chaud a mettre en place.
Je serais également preneur d’une solution en css, qui aurait l’avantage de ne pas poser trop de problème de type « compatibilité avec ie6″ ou de demande du type « voulez-vous activer js » pour l’utilisateur selon son navigateur. Mais s’il n’y a pas d’autre solution, on prendra ce qu’on trouvera.
[...] rapide de souris de voir défiler toutes les vues d’un même produit (lire à ce propos : Affichez plus d’images dans vos listes produits). Ici, on retrouve le principe, mais sur des articles d’habillement. La vue proposée par [...]
[...] manipuler chaque chaussure en passant doucement la souris dessus grâce à un système panoramique vu aussi chez Zappos. La vue normale affiche plus de [...]
Bonjour,
Les utilisateurs apprécient clairement plusieurs images d’un même produit sous plusieurs angles. Cela permet d’observer le produit en profondeur. Cela aide à la conversion.
Malgré tout, je reste attaché au texte ! Les images accompagnent le contenu pour lui apporter un souffle bénéfique mais les avantages client, caractéristiques, conseils d’utilisation… restent primordiaux !
Bonjour,
L’importance des visuels produits n’est plus à démontrer !
Si vous désirez profiter de mon offre d’un shooting photo gratuit pour étudier l’impact de votre visel produit sur vos ventes, rendez-vous sur mon site : http://www.sandrabraida.com
A bientôt,
J’ai trouver un projet avec le framework Jquery pour faire cette effet : CJ Image Flipbox
Voici l’url : http://www.cjboco.com/projects.cfm/project/cj-image-flipbox/1.1.1/