CodiFolio

Un plugin jQuery pour comparer 2 images, faire la pluie et le beau temps.

Objectif:

Un conteneur, deux images ... Au survol de tout ce petit monde, on couvre ou découvre la première image.

Fonctionnement:

C'est un plugin qui fonctionne avec jQuery, il est paramètrisable:

La structure de l'HTML est assez simple: La première image doit posséder un attribut data-alterego avec l'url de la seconde image.
Cette première image doit avoir class="firstpic" et être contenue dans un conteneur avec class="contfirstpic"

Le tout va dans un autre conteneur sur lequel s'applique le script: voir le code plus bas.

• orientation:'h' // ou 'v'
• start: 0.5 // Pourcentage la première image recouvert par la deuxième.
• containerBorderWidth: 3 // Grosseur en pixels de la bordure qui entoure le conteneur.
• separatorBorderWidth: 3 // Grosseur en pixels de la bordure qui sépare les 2 images.
• withmousedown:false // ou true si l'on veut que cela fonctionne avec la souris appuyée.

Demonstration: choisis ta météo.

Usage par défaut.

Le même mais avec le bouton de la souris appuyé et couverture à 90%.

Orientation verticale, avec des bords plus fins.

Code

• html
• javascript

<script src="jquery.js"></script>
<script src="jquery.piccompare.js"></script>
<div id="ex1">
    <div class="contfirstpic">
        <img class="firstpic" src="soleil.png" alt="" data-alterego="nuage.png">
    </div>
</div>		

$(function(){
	/* Par Defaut
	 * - horizontal
	 * - fonctionne sur l'évènement mousemove
	 * - la séparation des 2 images est au centre.*/
	$('#ex1').piccompare();

	/* Paramètré
	 * - horizontal
	 * - fonctionne sur l'évènement mousemove et souris appuyée
	 * - la séparation des 2 images est à 90%.*/
	$('#ex2').piccompare({start:0.9, withmousedown:true, separatorBorderWidth: 1});

	/* Paramètré
	 * - vertical
	 * - La bordure du conteneur est de 1 pixel
	 * - la bordure qui sépare les 2 images est de 2pixels.*/
	$('#ex3').piccompare({
		orientation:'v',
		containerBorderWidth: 1,
		separatorBorderWidth: 2
	});
});

Le plugin:

A copier-coller dans un fichier javascript si ça vous chante.

(function($) { /** * jQuery.piccompare.js * @version: v1 * @author: Loicbcn * @date 28/11/2014 (Vendredi) vers 14h30 mais j'avance. * */ $.fn.piccompare = function(options) { var settings = $.extend({ orientation:'h', start: 0.5, containerBorderWidth: 3, separatorBorderWidth: 3, withmousedown:false }, options ); var styles = {'piccompare' : {'position':'relative', 'border':settings.containerBorderWidth + 'px solid #000'}, 'contfirstpic' : {}, 'contsecondpic': {'position':'absolute', 'overflow':'hidden', 'z-index':1, 'top':0, 'left':0, 'bottom':0, 'right':0, 'border-right': settings.separatorBorderWidth + 'px solid #000' }, 'firstpic' : {'display' : 'block', 'max-width':'100%'}, 'secondpic' : {'display' : 'block', 'max-width':'none'} }; this.each(function(){ var enableHandler = false; var piccompare = $(this); var firstpic = $('img', piccompare).css(styles.firstpic); var secondpic = $('<img>').addClass('secondpic').attr('src', firstpic.data('alterego')).css(styles.secondpic); var w = piccompare.width(); preloadImages([firstpic, secondpic], function(){ piccompare.css(styles.piccompare); if( settings.orientation == 'h'){ styles.contsecondpic.right = piccompare.width() - (settings.start * piccompare.width()) - settings.separatorBorderWidth; } else { styles.contsecondpic.bottom = piccompare.height() - (settings.start * piccompare.height()) - settings.separatorBorderWidth; styles.contsecondpic['border-right'] = 'none'; styles.contsecondpic['border-bottom'] = settings.separatorBorderWidth + 'px solid #000'; } var papa = $('<div>').addClass('contsecondpic').css(styles.contsecondpic); secondpic.css({'width': firstpic.width()}).appendTo(papa); piccompare.append(papa); }); piccompare.on('touchstart', function(e){ blockscroll(); timer = window.setInterval(function(){ enableHandler = true; }, 50); }); piccompare.on('touchend', function(e){ unblockscroll(); clearInterval(timer); enableHandler = true; }); piccompare.on('touchmove', function(e) { if (enableHandler) { handleMouseMove(e, piccompare, settings); enableHandler = false; } }); var ismousedown = false; piccompare.on('mousedown', function(e){ ismousedown = true; e.preventDefault(); }); piccompare.on('mouseup', function(){ ismousedown = false; }); piccompare.on('mouseenter', function(e){ timer = window.setInterval(function(){ enableHandler = true; }, 50); }); piccompare.on('mouseleave', function(e){ ismousedown = false; clearInterval(timer); enableHandler = true; }); piccompare.on('mousemove', function(e){ if( settings.withmousedown ){ if( !ismousedown ){ return false; } } if (enableHandler) { handleMouseMove(e, piccompare, settings); enableHandler = false; } }); }); return this; }; var scrolllistener = function(event){ event.preventDefault(); event.stopPropagation(); }; function blockscroll(){ document.body.addEventListener("touchmove", scrolllistener, false); } function unblockscroll(){ document.body.removeEventListener("touchmove", scrolllistener, false); } var doresize; $(window).on('resize', function(){ clearTimeout(doresize); doresize = setTimeout(function(){ $('.secondpic').width(function(){ return $(this).closest(':has(.contfirstpic)').find('img').width(); }); }, 200); }); function handleMouseMove(e, elem, settings){ var offset = elem.offset(); if( e.pageX ){ var posx = e.pageX - offset.left; var posy = e.pageY - offset.top; } else { var posx = e.originalEvent.touches[0].pageX - offset.left; var posy = e.originalEvent.touches[0].pageY - offset.top; } if( settings.orientation == 'h' ){ var delta = elem.width() - posx; if( delta < -settings.separatorBorderWidth){ delta = -settings.separatorBorderWidth; } var prop = {'right':delta}; } else{ var delta = elem.height() - posy; if( delta < -settings.separatorBorderWidth){ delta = -settings.separatorBorderWidth; } var prop = {'bottom':delta}; } $('.contsecondpic', elem).css(prop); } function preloadImages(images, callback) { var count = images.length; if(count === 0) { callback(); } var loaded = 0; $(images).each(function() { $('<img>').attr('src', this.attr('src')).load(function() { loaded++; if (loaded === count) { callback(); } }); }); }; }( jQuery ));

Retour à l'index.