Before/After Photograph Termination Alongside Jquery
Saturday, March 7, 2020
Edit
If you lot accept a pattern or makeup blog, or if you lot are using before as well as afterward paradigm comparison, this script volition nigh probable live useful for you. In this tutorial, you lot volition run across how to add together the Before/After plugin, a script that industrial plant alongside jQuery inward social club to display 2 pictures dynamically for comparing them at the same time.
To run across how it works, click on the demo link from below as well as drag horizontally the small-scale bar to run across both images that are beingness compared:
Implementing this script is actually easy. We simply require jQuery, the Before/After script, as well as the 2 images to compare.
Step 2. Right earlier </head> glue the next scripts:
Note: if the higher upwardly script doesn't piece of job for you, add together it higher upwardly the </body> tag. Also, delight run across if you lot accept added jQuery inward your template (if you lot did so, as well as then take the delineate of piece of job inward green).
Step 3. To add together it equally a gadget - larn to "Layout" as well as click on the "Add a gadget" link, as well as then pick out "HTML/Javascript" option. Paste this code within the empty box:
If you lot desire to add together to a greater extent than images, you lot volition require to alter the ID of the container. In my example, the container is called beforeafter1, thence you lot volition require to alter it to beforeafter2 as well as thence on, although, you lot tin pick out whatsoever name.
Then, add together some other line, similar the bluish 1 from below, inward the showtime code that you lot added inward measuring 2:
Below each paradigm /photo container are the "Show solely Before" as well as "Show solely after" links that 1 time clicked, volition display the "before" or "after" picture. If you lot desire to enshroud these links, as well as then simply alter "true" to "false" inward the showtime code (step 2) as well as they volition non live displayed anymore.
Note: if you lot run across white infinite simply about the drag icons, as well as then search for this code inward your template:
Credit: Catch my fame.
To run across how it works, click on the demo link from below as well as drag horizontally the small-scale bar to run across both images that are beingness compared:
Implementing this script is actually easy. We simply require jQuery, the Before/After script, as well as the 2 images to compare.
How to add together Before/After Effect on Blogger Images
Step 1. Go to "Template" as well as click on the "Edit HTML" button. Once the template HTMK editor opens up, click anywhere within the code expanse as well as press the CTRL + F keys to search for the next tag - hitting Enter to uncovering it:</head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>Step 3. Click the "Save template" push to relieve your changes.
<script src='http://code.jquery.com/ui/1.10.3/jquery-ui.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
(function(a){a.fn.extend({beforeAfter:function(b){var d={animateIntro:false,introDelay:1000,introDuration:1000,showFullLinks:true,imagePath:"/js/beforeAfter/"};var b=a.extend(d,b);var c=Math.round(Math.random()*100000000);return this.each(function(){var e=b;var h=a(this);var n=a("img:first",h).width();var p=a("img:first",h).height();a(h).width(n).height(p).css({overflow:"hidden",position:"relative",padding:"0"});var m=a("img:first",h).attr("src");var j=a("img:last",h).attr("src");a("img:first",h).attr("id","beforeimage"+c);a("img:last",h).attr("id","afterimage"+c);a("img",h).remove();a("div",h).css("float","left");a(h).prepend('<div id="dragwrapper'+c+'"><div id="drag'+c+'"><img width="8" height="56" alt=" this script volition nigh probable live useful for you lot Before/After Photo Effect alongside jQuery" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCi4oUzGEf6J5lKl_t8XsPyFWvZYQCXZnzj7GcTw-l1NphYlamUOQa0taXLlhSdCvaKWy6deqGPiJ6m8o5FyN40rGDVLfwxs2F6OkSLVPN2Lide7xE-p_zO5NiXKwBtGSKr2DZWb7AtyEz/s1600/handle.png" title="Before/After Photo Effect alongside jQuery" id="handle'+c+'" /></div></div>');a("#dragwrapper"+c).css({position:"absolute",padding:"0",left:(n/2)-(a("#handle"+c).width()/2)+"px","z-index":"20"}).width(a("#handle"+c).width()).height(p);a("#dragwrapper"+c).css({opacity:0.25});a("div:eq(2)",h).height(p).width(n/2).css({"background-image":"url("+m+")",position:"absolute",overflow:"hidden",left:"0px","z-index":"10"});a("div:eq(3)",h).height(p).width(n).css({"background-image":"url("+j+")",position:"absolute",overflow:"hidden",right:"0px"});a("#drag"+c).width(2).height(p).css({background:"#888",position:"absolute",left:"3px"});a("#beforeimage"+c).css({position:"absolute",top:"0px",left:"0px"});a("#afterimage"+c).css({position:"absolute",top:"0px",right:"0px"});a("#handle"+c).css({"z-index":"100",position:"relative",cursor:"pointer",top:(p/2)-(a("#handle"+c).height()/2)+"px",left:"-3px"});a(h).append('<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNhQDaO2jZoupUGBuso0tsmjDX9SLE6N0GujgAtFpyz0DJoOUeZn2YRP89xDO-VBhHqRRHBtURUTjVpq2hgMes6u76lvGsMDiiGXptmgm3APsvrs2uIEFeMvyHf_2PiDdi6ZSM0_UfkOk3/s1600/b_a-lt-small.png" width="7" height="15" id="lt-arrow'+c+'"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrrj31_Ia8Q-GN8NQsgIR4UTXJuvwQnugiWJd60re24yZg4jbhiyhVbRYLtyTDplKreMaerdZ-NnFkYOIWpVHqv6Sj1VITCOajOTLBhy2zdqBnmirViNREU6GRXPx-XHPB5BN33Y1_hZgU/s1600/b_a-rt-small.png" width="7" height="15" id="rt-arrow'+c+'">');if(e.showFullLinks){a(h).after('<div class="balinks" id="links'+c+'" style="position:relative"><span class="bflinks"><a id="showleft'+c+'" href="javascript:void(0)">Show solely before</a></span><span class="bflinks"><a id="showright'+c+'" href="javascript:void(0)">Show solely after</a></span></div>');a("#links"+c).width(n);a("#showleft"+c).css({position:"relative",left:"0px"}).click(function(){a("div:eq(2)",h).animate({width:n},200);a("#dragwrapper"+c).animate({left:n-a("#dragwrapper"+c).width()+"px"},200)});a("#showright"+c).css({position:"absolute",right:"0px"}).click(function(){a("div:eq(2)",h).animate({width:0},200);a("#dragwrapper"+c).animate({left:"0px"},200)})}var g=a("#dragwrapper"+c).offset();var k=g.left;var i=a("div:eq(2)",h).width();var f=a("div:eq(3)",h).width();a("#dragwrapper"+c).draggable({handle:a("#handle"+c),containment:h,axis:"x",drag:function(q,o){var s=a(this).offset();var r=s.left-k;a("div:eq(2)",h).width(i+r);a("#lt-arrow"+c).stop().animate({opacity:0},0);a("#rt-arrow"+c).stop().animate({opacity:0},0)}});if(e.animateIntro){a("div:eq(2)",h).width(n);a("#dragwrapper"+c).css("left",n-(a("#dragwrapper"+c).width()/2)+"px");setTimeout(function(){a("#dragwrapper"+c).css({opacity:1}).animate({left:(n/2)-(a("#dragwrapper"+c).width()/2)+"px"},e.introDuration,function(){a("#dragwrapper"+c).animate({opacity:0.25},1000)});a("div:eq(2)",h).width(n).animate({width:n/2+"px"},e.introDuration,function(){l()})},e.introDelay)}else{l()}function l(){a(h).hover(function(){a("#lt-arrow"+c).stop().css({"z-index":"20",position:"absolute",top:p/2-a("#lt-arrow"+c).height()/2+"px",left:parseInt(a("#dragwrapper"+c).css("left"))-10+"px"}).animate({opacity:1,left:parseInt(a("#lt-arrow"+c).css("left"))-6+"px"},200);a("#rt-arrow"+c).stop().css({position:"absolute",top:p/2-a("#lt-arrow"+c).height()/2+"px",left:parseInt(a("#dragwrapper"+c).css("left"))+10+"px"}).animate({opacity:1,left:parseInt(a("#rt-arrow"+c).css("left"))+6+"px"},200);a("#dragwrapper"+c).animate({opacity:1},200)},function(){a("#lt-arrow"+c).animate({opacity:0,left:parseInt(a("#lt-arrow"+c).css("left"))-6+"px"},350);a("#rt-arrow"+c).animate({opacity:0,left:parseInt(a("#rt-arrow"+c).css("left"))+6+"px"},350);a("#dragwrapper"+c).animate({opacity:0.25},350)});a(h).click(function(q){var r=q.pageX-this.offsetLeft;var o=n-r;a("#dragwrapper"+c).stop().animate({left:r-(a("#dragwrapper"+c).width()/2)+"px"},600);a("div:eq(2)",h).stop().animate({width:r+"px"},600);a("#lt-arrow"+c).stop().animate({opacity:0},50);a("#rt-arrow"+c).stop().animate({opacity:0},50)});a(h).one("mousemove",function(){a("#dragwrapper"+c).stop().animate({opacity:1},500)})}})}})})(jQuery);
//]]>
</script>
<script type='text/javascript'>
$(function(){
$('#beforeafter1').beforeAfter({showFullLinks : true});
});
</script>
Note: if the higher upwardly script doesn't piece of job for you, add together it higher upwardly the </body> tag. Also, delight run across if you lot accept added jQuery inward your template (if you lot did so, as well as then take the delineate of piece of job inward green).
Step 3. To add together it equally a gadget - larn to "Layout" as well as click on the "Add a gadget" link, as well as then pick out "HTML/Javascript" option. Paste this code within the empty box:
<div id='beforeafter1'>Add the URL of the showtime image that is the "Before" image, as well as the URL of the minute image that should live the "After" image. Also, don't forget to specify the width as well as peak of each picture, thence that they piece of job on all browsers (see the constituent inward orangish where you lot require to add together the peak as well as width of your images).
<div><img alt='before' src='URL of the showtime image' width='500' height='291'/></div>
<div><img alt='after' src='URL of the minute image' width='500' height='291'/></div>
</div>
If you lot desire to add together to a greater extent than images, you lot volition require to alter the ID of the container. In my example, the container is called beforeafter1, thence you lot volition require to alter it to beforeafter2 as well as thence on, although, you lot tin pick out whatsoever name.
Then, add together some other line, similar the bluish 1 from below, inward the showtime code that you lot added inward measuring 2:
<script type='text/javascript'>You tin add together equally many before/after images equally you lot want, equally long equally all containers accept a dissimilar ID as well as the corresponding lines are added inward the script.
$(function(){
$('#beforeafter1').beforeAfter({showFullLinks : true});
$('#beforeafter2').beforeAfter({showFullLinks : true});
});
</script>
Below each paradigm /photo container are the "Show solely Before" as well as "Show solely after" links that 1 time clicked, volition display the "before" or "after" picture. If you lot desire to enshroud these links, as well as then simply alter "true" to "false" inward the showtime code (step 2) as well as they volition non live displayed anymore.
Note: if you lot run across white infinite simply about the drag icons, as well as then search for this code inward your template:
<Group description="Images" selector=".main-inner">And alter the #ffffff value to transparent.
<Variable name="image.background.color" description="Background Color" type="color" default="#ffffff" value="#ffffff"/>
Credit: Catch my fame.