Created
May 17, 2011 10:30
-
-
Save tcarlsen/976266 to your computer and use it in GitHub Desktop.
modified by TCarlsen to work whit jQuery UI Touch Punch
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
* jQuery beforeafter plugin | |
* @author admin@catchmyfame.com - http://www.catchmyfame.com | |
* @version 1.2 | |
* @date October 18, 2010 | |
* @category jQuery plugin | |
* @copyright (c) 2009 admin@catchmyfame.com (www.catchmyfame.com) | |
* @license CC Attribution-NoDerivs 3.0 Unported - http://creativecommons.org/licenses/by-nc-sa/3.0/ | |
*/ | |
// before image : $('div:eq(2)', obj) | |
// after image : $('div:eq(3)', obj) | |
/* | |
** modified by TCarlsen to work whit jQuery UI Touch Punch : https://github.com/furf/jquery-ui-touch-punch/blob/master/jquery.ui.touch-punch.js | |
*/ | |
(function($){ | |
$.fn.extend({ | |
beforeAfter: function(options) | |
{ | |
var defaults = | |
{ | |
animateIntro : false, | |
introDelay : 1000, | |
introDuration : 1000, | |
showFullLinks : true, | |
imagePath : '' | |
}; | |
/* cheking for touch device to know what gif to use/size //TCarlsen*/ | |
$.support.touch = typeof Touch === 'object'; | |
if ($.support.touch) { | |
var handleImage = 'handleiPad.gif'; | |
var handleImageW = 50; | |
} else { | |
var handleImage = 'handle.gif'; | |
var handleImageW = 8; | |
} | |
var options = $.extend(defaults, options); | |
var randID = Math.round(Math.random()*100000000); | |
return this.each(function() { | |
var o=options; | |
var obj = $(this); | |
var imgWidth = $('img:first', obj).width(); | |
var imgHeight = $('img:first', obj).height(); | |
$(obj) | |
.width(imgWidth) | |
.height(imgHeight) | |
.css({'overflow':'hidden','position':'relative','padding':'0'}); | |
var bef = $('img:first', obj).attr('src'); | |
var aft = $('img:last', obj).attr('src'); | |
$('img:first', obj).attr('id','beforeimage'+randID); | |
$('img:last', obj).attr('id','afterimage'+randID); | |
$('img',obj).remove(); // jQuery 1.4.3 and the current webkit browsers don't play nice with dragging. By removing the images and using them as div background we work around this | |
$('div', obj).css('float','left'); // Float all divs within the container left | |
// Create an inner div wrapper (dragwrapper) to hold the images. | |
/* handle.gif is now handleImage and width is now handleW //TCarlsen | |
$(obj).prepend('<div id="dragwrapper'+randID+'"><div id="drag'+randID+'"><img width="8" height="56" alt="handle" src="'+o.imagePath+'handle.gif" title="Drag me left or right to see the before and after images" id="handle'+randID+'" /></div></div>'); // Create drag handle | |
*/ | |
$(obj).prepend('<div id="dragwrapper'+randID+'"><div id="drag'+randID+'"><img width="'+handleImageW+'" height="56" alt="handle" src="'+o.imagePath+handleImage+'" title="Drag me left or right to see the before and after images" id="handle'+randID+'" /></div></div>'); // Create drag handle | |
$('#dragwrapper'+randID).css({'position':'absolute','padding':'0','left':(imgWidth/2)-($('#handle'+randID).width()/2)+'px','z-index':'20'}).width($('#handle'+randID).width()).height(imgHeight); | |
$('#dragwrapper'+randID).css({'opacity':.25}); // Sets the dragwrapper and contents to .25 opacity | |
$('div:eq(2)', obj).height(imgHeight).width(imgWidth/2).css({'background-image':'url('+bef+')','position':'absolute','overflow':'hidden','left':'0px','z-index':'10'}); // Set CSS properties of the before image div | |
$('div:eq(3)', obj).height(imgHeight).width(imgWidth).css({'background-image':'url('+aft+')','position':'absolute','overflow':'hidden','right':'0px'}); // Set CSS properties of the after image div | |
/* left is now calculated so we can use deferent handle sizes //TCarlsen | |
$('#drag'+randID).width(2).height(imgHeight).css({'background':'#888','position':'absolute','left':'3px'}); // Set drag handle CSS properties // Set drag handle CSS properties | |
*/ | |
$('#drag'+randID).width(2).height(imgHeight).css({'background':'#888','position':'absolute','left':$('#handle'+randID).width()/2+'px'}); | |
$('#beforeimage'+randID).css({'position':'absolute','top':'0px','left':'0px'}); | |
$('#afterimage'+randID).css({'position':'absolute','top':'0px','right':'0px'}); | |
/* left is now calculated so we can use deferent handle sizes //TCarlsen | |
$('#handle'+randID).css({'z-index':'100','position':'relative','cursor':'pointer','top':(imgHeight/2)-($('#handle'+randID).height()/2)+'px','left':'-3px'}) | |
*/ | |
$('#handle'+randID).css({'z-index':'100','position':'relative','cursor':'pointer','top':(imgHeight/2)-($('#handle'+randID).height()/2)+'px','left':'-'+$('#handle'+randID).width()/2+'px'}) | |
$(obj).append('<img src="'+o.imagePath+'lt-small.png" width="7" height="15" id="lt-arrow'+randID+'"><img src="'+o.imagePath+'rt-small.png" width="7" height="15" id="rt-arrow'+randID+'">'); | |
if(o.showFullLinks) | |
{ | |
$(obj).after('<div class="balinks" id="links'+randID+'" style="position:relative"><span class="bflinks"><a id="showleft'+randID+'" href="javascript:void(0)">Show only before</a></span><span class="bflinks"><a id="showright'+randID+'" href="javascript:void(0)">Show only after</a></span></div>'); | |
$('#links'+randID).width(imgWidth); | |
$('#showleft'+randID).css({'position':'relative','left':'0px'}).click(function(){ | |
$('div:eq(2)', obj).animate({width:imgWidth},200); | |
$('#dragwrapper'+randID).animate({left:imgWidth-$('#dragwrapper'+randID).width()+'px'},200); | |
}); | |
$('#showright'+randID).css({'position':'absolute','right':'0px'}).click(function(){ | |
$('div:eq(2)', obj).animate({width:0},200); | |
$('#dragwrapper'+randID).animate({left:'0px'},200); | |
}); | |
} | |
var barOffset = $('#dragwrapper'+randID).offset(); // The coordinates of the dragwrapper div | |
var startBarOffset = barOffset.left; // The left coordinate of the dragwrapper div | |
var originalLeftWidth = $('div:eq(2)', obj).width(); | |
var originalRightWidth = $('div:eq(3)', obj).width(); | |
$('#dragwrapper'+randID).draggable({handle:$('#handle'+randID),containment:obj,axis:'x',drag: function(e, ui){ | |
var offset = $(this).offset(); | |
var barPosition = offset.left - startBarOffset; | |
$('div:eq(2)', obj).width(originalLeftWidth + barPosition); | |
$('#lt-arrow'+randID).stop().animate({opacity:0},0); | |
$('#rt-arrow'+randID).stop().animate({opacity:0},0); | |
} | |
}); | |
if(o.animateIntro) | |
{ | |
$('div:eq(2)', obj).width(imgWidth); | |
$('#dragwrapper'+randID).css('left',imgWidth-($('#dragwrapper'+randID).width()/2)+'px'); | |
setTimeout(function(){ | |
$('#dragwrapper'+randID).css({'opacity':1}).animate({'left':(imgWidth/2)-($('#dragwrapper'+randID).width()/2)+'px'},o.introDuration,function(){$('#dragwrapper'+randID).animate({'opacity':.25},1000)}); | |
// The callback function at the end of the last line is there because Chrome seems to forget that the divs have overlay hidden applied earlier | |
$('div:eq(2)', obj).width(imgWidth).animate({'width':imgWidth/2+'px'},o.introDuration,function(){clickit();}); | |
},o.introDelay); | |
} | |
else | |
{ | |
clickit(); | |
} | |
function clickit() | |
{ | |
$(obj).hover(function(){ | |
$('#lt-arrow'+randID).stop().css({'z-index':'20','position':'absolute','top':imgHeight/2-$('#lt-arrow'+randID).height()/2+'px','left':parseInt($('#dragwrapper'+randID).css('left'))-10+'px'}).animate({opacity:1,left:parseInt($('#lt-arrow'+randID).css('left'))-6+'px'},200); | |
$('#rt-arrow'+randID).stop().css({'position':'absolute','top':imgHeight/2-$('#lt-arrow'+randID).height()/2+'px','left':parseInt($('#dragwrapper'+randID).css('left'))+10+'px'}).animate({opacity:1,left:parseInt($('#rt-arrow'+randID).css('left'))+6+'px'},200); | |
$('#dragwrapper'+randID).animate({'opacity':1},200); | |
},function(){ | |
$('#lt-arrow'+randID).animate({opacity:0,left:parseInt($('#lt-arrow'+randID).css('left'))-6+'px'},350); | |
$('#rt-arrow'+randID).animate({opacity:0,left:parseInt($('#rt-arrow'+randID).css('left'))+6+'px'},350); | |
$('#dragwrapper'+randID).animate({'opacity':.25},350); | |
} | |
); | |
// When clicking in the container, move the bar and imageholder divs | |
$(obj).click(function(e){ | |
var clickX = e.pageX - this.offsetLeft; | |
var img2Width = imgWidth-clickX; | |
$('#dragwrapper'+randID).stop().animate({'left':clickX-($('#dragwrapper'+randID).width()/2)+'px'},600); | |
$('div:eq(2)', obj).stop().animate({'width':clickX+'px'},600); | |
$('#lt-arrow'+randID).stop().animate({opacity:0},50); | |
$('#rt-arrow'+randID).stop().animate({opacity:0},50); | |
}); | |
$(obj).one('mousemove', function(){$('#dragwrapper'+randID).stop().animate({'opacity':1},500);}); // If the mouse is over the container and we animate the intro, we run this to change the opacity since the hover event doesnt get triggered yet | |
} | |
}); | |
} | |
}); | |
})(jQuery); |
You will need this setup:
<div id="beforeafter">
<div><img alt="before" src="img1.jpg"></div>
<div><img alt="after" src="img2.jpg"></div>
</div>
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.12.custom.min.js"></script>
<script type="text/javascript" src="jquery.ui.touch-punch.min.js"></script>
<script type="text/javascript" src="jquery.beforeafter.js"></script>
<script type="text/javascript">$(function(){$('#beforeafter').beforeAfter();});</script>
Here is an example off the code being used, maybe it will help you out: http://www.b.dk/helpers/beforeafter/?id=4266
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hi,
I'm trying to implement this to make before/after useable on ipad. But I'm running into a lot of problems. I added ui.touch-punch to my index/server. But it doesn't work. Also, I see in the script that the images are removed and replaced as background images...after this, my images are gone completely. Do I need to add "imgname.jpg" somewhere in the script?
Thank you so much, sorry to be a bother.
Millicent