Bonjour à tous !

J'ai une demande un peu particulière puisqu'elle porte sur la création d'une galerie avec un effet roll over sur les images (avant et après photo).

Voici un exemple :


Mercihttp://www.thephotoretoucher.co.uk/photo_retouching_model.php

Comment procède-t-on ?

Merci...
Modifié par figueline (03 Sep 2010 - 11:59)
Bonjour Smiley smile

Ce que tu cherches est un carousel de photos. Celà s'implante souvent avec des librairies comme jquery.
Voici un exemple d'un de ces carousels (sample 7) et voici une liste de plusieurs carouels . Si celà ne convient pas, je pense que tu peux chercher "carousel jquery" sur google tu en trouveras pleins d'autres.

Pour l'implantation, c'est souvent expliqué comment faire, en résumé en général tu appelles une librairie jquery, puis un plugin (ou pas ça depends) et quelques petites lignes de code pour configurer tout ça. Si tu rencontres des soucis dans l'implantation n'hésite pas Smiley smile

Edit : arggh j'avais mal lu l'effet avant/ après. On dirait que leur effet est fait avec un javascript sur la fonction hover qui remplace la première image par la seconde au survol, voici leur code:

onmouseover="MM_swapImage('Retouching skin and hair','','images/side_model_close_before.jpg',1)" onmouseout="MM_swapImgRestore()"


Qui appelle cette fonction :

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}


J'avoue ça a l'air bien complexe et ya plus simple si tu as la possibilité de contrôler "chaque" image:

<a href="#" target="_blank" onmouseover="document.NOM.src='monimageausurvol.png';" onmouseout="document.NOM.src='"IMAGE1.gif"';"><img src="monimagenormale.png" name="NOM" border=0></a>
[/i]
Modifié par InpIxelItrust (03 Sep 2010 - 13:18)