Achal Jain

Rich Tabor

<p>A block to let your visitors compare between two images. After, before, horizontal, and vertical comparison.</p>
<h3>FEATURES</h3>
<ul>
<li>Visibility Ratio</li>
<li>Orientation – Horizontal, Vertical</li>
<li>Handle movement control – Swipe, Click, Hover</li>
<li>Custom labels for before and after</li>
<li>Label position and styling options</li>
<li>Overlay</li>
</ul>


Image Comparison Block

My only regret is that I cannot give it 10 stars !!! I can't imagine what else can be done to make it better (and keeping it as simple to use as possible), well, maybe to be able to make me a cup of coffee...

Thank you for this block plugin, much needed...

Works Perfectly !

A block to let your visitors compare between two images. After, before, horizontal, and vertical comparison.

Hemant Nandrajog (instruite)

<p>Before After plugin integrates modified version <a href="http://www.catchmyfame.com/2009/06/25/jquery-beforeafter-plugin/" title="jQuery Before/After Plugin" rel="nofollow ugc">jQuery Before/After Plugin</a> in the wordpress.<br />
It can be used to show the difference between edited and original photo, before and after photos of changes, etc.</p>
<p>Please check ‘Other Notes’ for the Usage instructions to see how to use it on your blog</p>
<p>Demosites:</p>
<p><a href="https://www.instruite.com/blog/2016/02/16/before-after-works/" title="Demo with Latest version" rel="nofollow ugc">Demo with Latest version</a><br />
<a href="http://www.instruite.com/blog/2011/05/18/photostrying-photoshop-filters/" title="Operation on custom theme" rel="nofollow ugc">Operation on custom theme</a></p>
<p>Author info:<br />
Follow me on <a href="http://twitter.com/instruite/" title="Follow instruite on twitter" rel="nofollow ugc">Twitter</a> or become my Friend on <a href="http://www.facebook.com/instruite/" title="Instruite's Facebook page" rel="nofollow ugc">facebook</a><br />
Also on <a href="https://plus.google.com/108357740742566610994/" title="Follow instruite on Google+" rel="nofollow ugc">Google+</a></p>
<h4>Usage</h4>
<ul>
<li>Write the content of your post other than the images</li>
<li>Switch to ‘HTML-editor’ mode of the post editor area</li>
<li>Click ‘BeforeAfter’ button (This will start the ‘[beforeafter]’ shortcode)</li>
<li>Add the photos to your post through the wordpress image/media uploader</li>
<li>1 photo should be left align when you insert the images on your post, the other one can be aligned right/center/none</li>
<li>The ‘left-aligned’ photo is taken as before photo so please align your photos accordingly</li>
<li>After you have inserted the two images in the post Click ‘BeforeAfter’ button again to close ‘[/beforeafter]’ shortcode.</li>
<li>You can add more content to your post after closing the ‘[/beforeafter]’ shortcode</li>
<li>The content other than image information withing the ‘[beforeafter]…[/beforeafter]’ is ignored when the shortcode is executed, in other places like home page archive page the content will be shown as is in the post.</li>
</ul>


Before After

Before After plugin integrates modified version [jQuery Before/After Plugin](http://www.catchmyfame.com/2009/06/25/jquery-beforeafter-plugin/ "jQ …

Image Comparison Block vs Before After