AAizemberg

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_98":-5,"_50":16,"_99":-5,"_100":101,"_102":103},"routes/viz-public",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":16,"_18":16,"_19":-5,"_20":21,"_22":16,"_23":24,"_25":-5,"_26":-5,"_27":-5,"_28":16,"_29":30,"_31":-5,"_32":33},"vizInfo",{"_40":59,"_72":73,"_74":75,"_76":-7,"_77":43,"_78":41,"_79":-5,"_80":81,"_82":16,"_83":84,"_85":84,"_86":-7,"_87":-7,"_56":88,"_58":89,"_90":-5,"_91":55,"_92":93,"_94":95,"_96":-5,"_97":-5},"vizContent",{"_40":59,"_60":61},"ownerAccount",{"_40":41,"_42":43,"_44":45,"_46":39,"_47":-5,"_48":-7,"_49":-7,"_50":16,"_51":-7,"_52":39,"_53":39,"_54":55,"_56":57,"_58":57},"isOwner",false,"isAuthenticated","canCreatePrivate","commitId","similarVizzes",[],"embed","forksCount",0,"forkedFromViz","runtimeVersion","license","descriptionIsAiGenerated","sourceProvenance",{"_34":35,"_36":37,"_27":-5,"_38":39},"project","socialImageUrl","https://next.vizhub.com/images/64aee7ebdb57fb446c1d09c926d8082805e6a9a1a63e7d274e71ab2282d28038.png","sourceType","gist","originalUrl","https://gist.github.com/aaizemberg/10648864","author","aaizemberg","id","gist-user-aaizemberg","accountType","user","email","","displayName","avatar","oauthProvider","oauthId","isAdmin","stripeCustomerId","handle","handleNormalized","lifecycleEmailsEnabled",true,"createdAt",1791743441346,"updatedAt","gist-10648864","files",{"_62":63,"_64":65},"f1",{"_66":70,"_68":71},"f2",{"_66":67,"_68":69},"name","jquery.beforeafter-1.4.js","text","/*\n * jQuery beforeafter plugin\n * @author admin@catchmyfame.com - http://www.catchmyfame.com\n * @version 1.4\n * @date September 19, 2011\n * @category jQuery plugin\n * @copyright (c) 2009 admin@catchmyfame.com (www.catchmyfame.com)\n * @license CC Attribution-NonCommercial-ShareAlike 3.0 Unported (CC BY-NC-SA 3.0) - http://creativecommons.org/licenses/by-nc-sa/3.0/\n */\n(function($){\n\t$.fn.extend({ \n\t\tbeforeAfter: function(options)\n\t\t{\n\t\t\tvar defaults = \n\t\t\t{\n\t\t\t\tanimateIntro : false,\n\t\t\t\tintroDelay : 1000,\n\t\t\t\tintroDuration : 1000,\n\t\t\t\tintroPosition : .5,\n\t\t\t\tshowFullLinks : true,\n\t\t\t\tbeforeLinkText: 'antes',\n\t\t\t\tafterLinkText: 'después',\n\t\t\t\timagePath : './js/',\n\t\t\t\tcursor: 'pointer',\n\t\t\t\tclickSpeed: 600,\n\t\t\t\tlinkDisplaySpeed: 200,\n\t\t\t\tdividerColor: '#888',\n\t\t\t\tenableKeyboard: false,\n\t\t\t\tkeypressAmount: 20,\n\t\t\t\tonReady: function(){}\n\t\t\t};\n\t\tvar options = $.extend(defaults, options);\n\n\t\tvar randID = Math.round(Math.random()*100000000);\n\n \t\treturn this.each(function() {\n\t\t\tvar o=options;\n\t\t\tvar obj = $(this);\n\n\t\t\tvar imgWidth = $('img:first', obj).width();\n\t\t\tvar imgHeight = $('img:first', obj).height();\n\t\t\t\n\t\t\tif( $('div',obj).length != 2 ) $('img',obj).wrap('

'); // For backwards compatability. Used to require images to be wrapped in div tags.\n\n\t\t\t$(obj)\n\t\t\t.width(imgWidth)\n\t\t\t.height(imgHeight)\n\t\t\t.css({'overflow':'hidden','position':'relative','padding':'0'});\n\n\t\t\tvar bef = $('img:first', obj).attr('src');\n\t\t\tvar aft = $('img:last', obj).attr('src');\n\t\t\t\n\t\t\t$('img:first', obj).attr('id','beforeimage'+randID);\n\t\t\t$('img:last', obj).attr('id','afterimage'+randID);\n\t\t\n\t\t\t// Create an inner div wrapper (dragwrapper) to hold the images.\n\t\t\t$(obj).prepend('

$\"handle\"$

'); // Create drag handle\n\t\t\t$('#dragwrapper'+randID).css({'opacity':.25,'position':'absolute','padding':'0','left':(imgWidth*o.introPosition)-($('#handle'+randID).width()/2)+'px','z-index':'20'}).width($('#handle'+randID).width()).height(imgHeight);\n\n\t\t\t$('div:eq(2)', obj).height(imgHeight).width(imgWidth*o.introPosition).css({'position':'absolute','overflow':'hidden','left':'0px','z-index':'10'}); // Set CSS properties of the before image div\n\t\t\t$('div:eq(3)', obj).height(imgHeight).width(imgWidth).css({'position':'absolute','overflow':'hidden','right':'0px'});\t// Set CSS properties of the after image div\n\t\t\t$('#drag'+randID).width(2).height(imgHeight).css({'background':o.dividerColor,'position':'absolute','left':'3px'});\t// Set drag handle CSS properties\n\t\t\t$('#beforeimage'+randID).css({'position':'absolute','top':'0px','left':'0px'});\n\t\t\t$('#afterimage'+randID).css({'position':'absolute','top':'0px','right':'0px'});\n\t\t\t$('#handle'+randID).css({'z-index':'100','position':'relative','cursor':o.cursor,'top':(imgHeight/2)-($('#handle'+randID).height()/2)+'px','left':'-3px'})\n\n\t\t\t$(obj).append('

');\n\n\t\t\tif(o.showFullLinks)\n\t\t\t{\t\n\t\t\t\t$(obj).after('

'+o.beforeLinkText+''+o.afterLinkText+'

');\n\t\t\t\t$('#links'+randID).width(imgWidth);\n\t\t\t\t$('#showleft'+randID).css({'position':'relative','left':'0px'}).click(function(){\n\t\t\t\t\t$('div:eq(2)', obj).animate({width:imgWidth},o.linkDisplaySpeed);\n\t\t\t\t\t$('#dragwrapper'+randID).animate({left:imgWidth-$('#dragwrapper'+randID).width()+'px'},o.linkDisplaySpeed);\n\t\t\t\t});\n\t\t\t\t$('#showright'+randID).css({'position':'absolute','right':'0px'}).click(function(){\n\t\t\t\t\t$('div:eq(2)', obj).animate({width:0},o.linkDisplaySpeed);\n\t\t\t\t\t$('#dragwrapper'+randID).animate({left:'0px'},o.linkDisplaySpeed);\n\t\t\t\t});\n\t\t\t}\n\n\t\t\tif(o.enableKeyboard)\n\t\t\t{\n\t\t\t\t$(document).keydown(function(event){\n\t\t\t\t\tif(event.keyCode == 39)\n\t\t\t\t\t{\n\t\t\t\t\t\tif( (parseInt($('#dragwrapper'+randID).css('left'))+parseInt($('#dragwrapper'+randID).width()) + o.keypressAmount) <= imgWidth )\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t$('#dragwrapper'+randID).css('left', parseInt( $('#dragwrapper'+randID).css('left') ) + o.keypressAmount + 'px');\n\t\t\t\t\t\t\t$('div:eq(2)', obj).width( parseInt( $('div:eq(2)', obj).width() ) + o.keypressAmount + 'px' );\n\t\t\t\t\t\t}\n\t\t\t\t\t\telse\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t$('#dragwrapper'+randID).css('left', imgWidth - parseInt( $('#dragwrapper'+randID).width() ) + 'px');\n\t\t\t\t\t\t\t$('div:eq(2)', obj).width( imgWidth - parseInt( $('#dragwrapper'+randID).width() )/2 + 'px' );\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\tif(event.keyCode == 37)\n\t\t\t\t\t{\n\t\t\t\t\t\tif( (parseInt($('#dragwrapper'+randID).css('left')) - o.keypressAmount) >= 0 )\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t$('#dragwrapper'+randID).css('left', parseInt( $('#dragwrapper'+randID).css('left') ) - o.keypressAmount + 'px');\n\t\t\t\t\t\t\t$('div:eq(2)', obj).width( parseInt( $('div:eq(2)', obj).width() ) - o.keypressAmount + 'px' );\n\t\t\t\t\t\t}\n\t\t\t\t\t\telse\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t$('#dragwrapper'+randID).css('left', '0px');\n\t\t\t\t\t\t\t$('div:eq(2)', obj).width($('#dragwrapper'+randID).width()/2);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t}\n\n\t\t\t$('#dragwrapper'+randID).draggable( { containment:obj,drag:drag,stop:drag });\n\n\t\t\tfunction drag()\n\t\t\t{\n\t\t\t\t$('#lt-arrow'+randID+', #rt-arrow'+randID).stop().css('opacity',0);\n\t\t\t\t$('div:eq(2)', obj).width( parseInt( $(this).css('left') ) + 4 );\n\t\t\t}\n\n\t\t\tif(o.animateIntro)\n\t\t\t{\n\t\t\t\t$('div:eq(2)', obj).width(imgWidth);\n\t\t\t\t$('#dragwrapper'+randID).css('left',imgWidth-($('#dragwrapper'+randID).width()/2)+'px');\n\t\t\t\tsetTimeout(function(){\n\t\t\t\t\t$('#dragwrapper'+randID).css({'opacity':1}).animate({'left':(imgWidth*o.introPosition)-($('#dragwrapper'+randID).width()/2)+'px'},o.introDuration,function(){$('#dragwrapper'+randID).animate({'opacity':.25},1000)});\n\t\t\t\t\t$('div:eq(2)', obj).width(imgWidth).animate({'width':imgWidth*o.introPosition+'px'},o.introDuration,function(){clickit();o.onReady.call(this);});\n\t\t\t\t},o.introDelay);\n\t\t\t}\n\t\t\telse\n\t\t\t{\n\t\t\t\tclickit();\n\t\t\t\to.onReady.call(this);\n\t\t\t}\n\n\t\t\tfunction clickit()\n\t\t\t{\n\t\t\t\t$(obj).hover(function(){\n\t\t\t\t\t\t$('#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);\n\t\t\t\t\t\t$('#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);\n\t\t\t\t\t\t$('#dragwrapper'+randID).animate({'opacity':1},200);\n\t\t\t\t\t},function(){\n\t\t\t\t\t\t$('#lt-arrow'+randID).animate({opacity:0,left:parseInt($('#lt-arrow'+randID).css('left'))-6+'px'},350);\n\t\t\t\t\t\t$('#rt-arrow'+randID).animate({opacity:0,left:parseInt($('#rt-arrow'+randID).css('left'))+6+'px'},350);\n\t\t\t\t\t\t$('#dragwrapper'+randID).animate({'opacity':.25},350);\n\t\t\t\t\t}\n\t\t\t\t);\n\n\t\t\t\t// When clicking in the container, move the bar and imageholder divs\n\t\t\t\t$(obj).click(function(e){\n\t\t\t\t\tvar clickX = e.pageX - $(this).offset().left;\n\t\t\t\t\t$('#dragwrapper'+randID).stop().animate({'left':clickX-($('#dragwrapper'+randID).width()/2)+'px'},o.clickSpeed);\n\t\t\t\t\t$('div:eq(2)', obj).stop().animate({'width':clickX+'px'},o.clickSpeed);\n\t\t\t\t\t$('#lt-arrow'+randID+',#rt-arrow'+randID).stop().animate({opacity:0},50);\n\t\t\t\t});\n\t\t\t\t$(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 when the mouse moves since the hover event doesnt get triggered yet\n\t\t\t}\n \t\t});\n \t}\n\t});\n})(jQuery);","index.html","\n\n\n\n \n AAizemberg\n\n \n \n\n \n\n \n\n\n\n

$\"before\"$

$\"after\"$

\n\n\n","slug","10648864","title","AAizemberg","description","ownerType","ownerId","projectId","visibility","public","isTemplate","headCommitId","AAkNux325aBO-_vRqPVN-","startCommitId","forkedFrom","forkedFromVisibility",1397482786000,1397651019000,"publishedAt","isPublished","draftStatus","published","lifecycleStatus","active","trashedAt","purgeAfter","userId","account","appOrigin","https://next.vizhub.com","googleAnalyticsId","G-5BVJNTEF9V"]