Comparateur d'images

Résolu
Vicolaships Messages postés 7 Statut Membre -  
Vicolaships Messages postés 7 Statut Membre -
Bonjour,

Je cherche un moyen de comparer deux images sur le web (l'originale et la photo modifiée) comme sur cet exemple :

http://data.imagup.com/11/1169727148.png

De la manière ici, ou on pourrait faire bouger la ligne blanche pour slider vers la gauche ou la droite.

Je prends tout ce qui est gratuit/libre !

Merci

A voir également:

1 réponse

Réponse 1 / 1
aiglenoirdu29 Messages postés 11426 Statut Contributeur 2 349
 
Bonjour,

un pote m'avait fait ça un coup :

alors avec un dossier contenant deux images de 500x500px nommées avant.png et apres.png

tu y mets les fichiers suivants :
1
aiglenoirdu29 Messages postés 11426 Statut Contributeur 2 349
 
index.html 
<html>

 <head>
 
  <title>effet avant/apres</title>
  
  <style type="text/css">
  
  .avant_apres {display:block;clear:both;width:500px;height:500px;overflow:hidden}
  .avant_apres > div {display:block;min-width:30px;max-width:470px;height:500px;position:relative;top:0;left:0;background-repeat:no-repeat}
  .avant_apres .avant {float:right;background-position:right top}
  .avant_apres .apres {-moz-box-shadow:0 10px 10px #000;-webkit-box-shadow:0 10px 10px #000;background-position:left top}
  
  </style>
  
  <script type="text/javascript">
  
	var souris_x;
  
	document.onmousemove=function(event)
	{
		ev = event || window.event;
		souris_x = ev.pageX;
	}

	function avant_apres(objet)
	{
		var divisions = objet.getElementsByTagName('div');
		
		for(i=0;i<divisions.length;i++)
		{
			if(divisions[i].className=='avant') var avant = divisions[i];
			if(divisions[i].className=='apres') var apres = divisions[i];
		}
		
		apres.style.width = souris_x - positionX(objet);
		avant.style.width = positionX(objet) + 500 - souris_x ;	
	}
	
	function positionX(objet)
	{
        var x = objet.offsetLeft || 0;
        while (objet = objet.offsetParent) x += objet.offsetLeft;
        return x;
	}
  
  </script>
  
 </head>
 
 <body>
 
  <p style="width:500px;text-align:justify">
   Voici un effet avant/après simplifié. Tout ce que tu as à faire,
   c'est prendre 2 images de meme tailles (dans cet exemple, elles doivent faire 500x500 px).
   Ensuite tu ouvres le code source de cette page et tu copies les parties CSS et Javascript
   Dans la balise <b><HEAD></b> de ta page Web.
   
   Enfin, tu copies autant de fois que tu veux la balise <b><DIV class=avant_apres> [...] </DIV>,</b>
   en modifiant juste les url().
   
   Voilà.
   
  </p>
  
  <div class=avant_apres onMouseMove="avant_apres(this)">
  
   <div class=avant style="background-image:url(avant.png);width:470px"> </div>
   
   <div class=apres style="background-image:url(apres.png);width:30px"> </div>
   
  </div>
 
 </body>
 
</html>
0
aiglenoirdu29 Messages postés 11426 Statut Contributeur 2 349
 
ge_image_slider.css 
		
		
		#container 
		{
		 width:948px; 
		 /*margin:0 auto;*/
		}
		
		#caption 
		{
		 text-align: left;
		}
		
		#container2 
		{
		 width:948px; 
		 /*margin:0 auto;*/
		}
		
		#caption2 
		{
		 text-align: left;
		}
		
		#container3 
		{
		 width:948px; 
		 /*margin:0 auto;*/
		}
		
		#caption3 
		{
		 text-align: left;
		}
		
		#container4 
		{
		 width:948px; 
		 /*margin:0 auto;*/
		}
		
		#caption4
		{
		 text-align: left;
		}
		
	    #container5 
		{
		 width:948px; 
		 /*margin:0 auto;*/
		}
		
		#caption5
		{
		 text-align: left;
		}
		
		#container6 
		{
		 width:948px; 
		 /*margin:0 auto;*/
		}
		
		#caption6
		{
		 text-align: left;
		}
		
		/* width and height for the block */
		.beforeafter {width:948px; height:450px;}
		
		body 
		{ 
        text-align: center; 
        font: 11px/14px Arial, Helvetica, Geneva, sans-serif;
	    letter-spacing: 0em;
	    color: #4c4c4c;
        }	
        
        h2
        {
	    font: bold 14px/normal Arial, Helvetica, Geneva, sans-serif;
	    color: #669933;
	    letter-spacing: -.05em;
	    margin-bottom: 7px;
	    margin-top: 2px;
        }	
		
		/* mandatory style for the plugins */
		
		.ba-mask {position:absolute; top:0; left:0; z-index:100; border-right:3px solid #333; overflow:hidden; box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.6);box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6); -webkit-box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.6);  -moz-box-shadow: 5px 0 7px rgba(0, 0, 0, 0.6);}
		.ba-bg {position:absolute; top:0; left:0; z-index:0;}
		.ba-caption 
		{
		    display:none;
			
			/* mandatory */
			position:absolute; 
			bottom:10px; 
			left:10px; 
			z-index:120;	
			 
			/* customizable styling */
			background:#000; 
			color:#fff; 
			text-align:center;
			padding:5px; 
			font-size:12px; 
			font-family:arial; 
			filter:alpha(opacity=80);-moz-opacity:0.8;-khtml-opacity: 0.8;opacity: 0.8; 
			-webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; 			
		}
0
aiglenoirdu29 Messages postés 11426 Statut Contributeur 2 349
 
jquery.min.js 
tu trouveras le code sur google normalement
0
aiglenoirdu29 Messages postés 11426 Statut Contributeur 2 349
 
image_slider.js 
	    $(document).ready(function () {

	        // Some options for customization
	        var leftgap = 10; 	/* gap on the left */
	        var rightgap = 10; 	/* gap on the right */
	        var defaultgap = 50; /* the intro gap */
	        var caption = true; 	/* toggle caption */
	        var reveal = 0.5; 	/* define 0 - 1 far does it goes to reveal the second caption */

	        // find each of the .beforeafter
	        $('.beforeafter').each(function () {

	            // set current selected item to variable
	            var i = $(this);
	            // get the source of the first image and second image using eq(index)
	            var img_mask = i.children('img:eq(0)').attr('src');
	            var img_bg = i.children('img:eq(1)').attr('src');

	            // get the caption for the first image as default caption
	            var img_cap_one = i.children('img:eq(0)').attr('alt');

	            // get the dimension of the first image, assuming second image has the same dimension
	            var width = i.children('img:eq(0)').width();
	            var height = i.children('img:eq(0)').height();

	            // hide the images, not removing it because we will need it later
	            i.find('img').hide();

	            // set some css attribute to current item
	            i.css({ 'overflow': 'hidden', 'position': 'relative' });

	            // append additional html element
	            i.append('<div class="ba-mask"></div>');
	            i.append('<div class="ba-bg"></div>');
	            i.append('<div class="ba-caption">' + img_cap_one + '</div>');

	            // set the dimension of appended html element
	            i.children('.ba-mask, .ba-bg').width(width);
	            i.children('.ba-mask, .ba-bg').height(height);

	            // set the images as background for ba-mask and ba-bg
	            i.children('.ba-mask').css('backgroundImage', 'url(' + img_mask + ')');
	            i.children('.ba-bg').css('backgroundImage', 'url(' + img_bg + ')');

	            // animate to reveal the background image
	            i.children('.ba-mask').animate({ 'width': width - defaultgap }, 1000);

	            // if caption is true, then display it, otherwise, hide it
	            if (caption) i.children('.caption').show();
	            else i.children('.ba-caption').hide();

	        }).mousemove(function (e) {

	            // set current selected item to variable
	            var i = $(this);

	            // get the position of the image
	            pos_img = i.position()['left'];

	            // get the position of the mouse pointer
	            pos_mouse = e.pageX;

	            // calculate the difference between the image and cursor
	            // the difference will the width of the mask image
	            new_width = pos_mouse - pos_img;
	            img_width = i.width();

	            // get the captions for first and second images
	            img_cap_one = i.children('img:eq(0)').attr('alt');
	            img_cap_two = i.children('img:eq(1)').attr('alt');

	            /*
	            // for debugging purposes
	            $('#debug').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);
	            $('#debug2').html(i.position()['left']);
	            $('#debug3').html(new_width);
	            */

	            // make sure it reveal the image and left some gaps on left and right
	            // it depends on the value of leftgap and rightgap
	            if (new_width > leftgap && new_width < (img_width - rightgap)) {
	                i.children('.ba-mask').width(new_width);
	            }

	            // toggle between captions.
	            // it uses the reveal variable to calculate
	            // eg, display caption two once the image is 50% (0.5) revealed.
	            if (new_width < (img_width * reveal)) {
	                i.children('.ba-caption').html(img_cap_two);
	            } else {
	                i.children('.ba-caption').html(img_cap_one);
	            }

	        });

	    });
0
aiglenoirdu29 Messages postés 11426 Statut Contributeur 2 349
 
Et normalement ça marche :)
Après il suffit d'adapter à ton site et à tes images
0

Discussions similaires

calcule nombre des pixels "noir" dans un image (noir/blanc)
neji55 -
nath84150 -

3 réponses
ou sont enregistrées les images
RAKAMA -
mathejea -

4 réponses
voir ses images enregistrés
bastUltra -
bastUltra -

2 réponses
comment fairte apparaître lisiblement les images enregistrées su
GEKA35 -
geka35 -

9 réponses