okdzhimiev

<p>Sravnitel is a WordPress plugin by Elphel Inc. based on a jQuery plugin <em>jquery.sravnitel.js</em>.</p>
<p><strong>Features</strong></p>
<ul>
<li>Compare 2+ images </li>
<li>Zoom and pan</li>
<li>Initial zoom and offset</li>
<li>Touch events: click, drag, pinch to zoom</li>
</ul>
<p><strong>Tips</strong></p>
<ul>
<li>Click on the view area to quickly switch between left and right image</li>
<li>Click on the zoom info in the top right to zoom-to-fit the view area</li>
<li>To place several instances of the plugin assign unique ids: [sravnitel id=’test1′ …], [sravnitel id=’test2′ …]</li>
</ul>
<p><strong>Working demo</strong></p>
<p><a href="http://blog.elphel.com/2017/01/lapped-mdct-based-image-conditioning-with-optical-aberrations-correction-color-conversion-edge-emphasis-and-noise-reduction/" rel="nofollow ugc">Elphel’s Blog: Lapped MDCT-based image conditioning with optical aberrations correction, color conversion, edge emphasis and noise reduction</a></p>
<p><strong>Quick examples</strong></p>
<ul>
<li>Fit image into the view window, w/o titles:<br />
[sravnitel images=”ID0,ID1,ID2″ width=640 height=480]</li>
<li>Fit image into the view window,  with titles and toggle button:<br />
[sravnitel images=”ID0,ID1,ID2″ width=640 height=480 showtitles=true showtoggle=true]</li>
<li>Also fit image, with titles:<br />
[sravnitel images=”ID0,ID1,ID2″ width=640 height=480 showtitles=true zoom=0]</li>
<li>Zoom 30%, with titles, x=0 and y=0 in the center of the view window:<br />
[sravnitel images=’ID0,ID1,ID2′ width=640 height=480 showtitles=true zoom=0.3 center_x=0 center_y=0]</li>
</ul>
<p><strong>Shortcode Parameters</strong></p>
<ul>
<li><strong>id</strong>         – int   – 0      – wrapper’s <div> element id</li>
<li><strong>images</strong>     – str   – ”     – (required) list of images ids (attachment_id), comma separated</li>
<li><strong>width</strong>      – int   – 530    – view window width px</li>
<li><strong>height</strong>     – int   – 300    – view window height px</li>
<li><strong>showtitles</strong> – bool  – false  – show/hide titles</li>
<li><strong>showtoggle</strong> – bool  – false  – show/hide button – switch between left and right image</li>
<li><strong>index_l</strong>    – int   – 0      – init, left image – is the index of the images array, starting from 0</li>
<li><strong>index_r</strong>    – int   – 1      – init, right image – is the index of the images array, starting from 0</li>
<li><strong>zoom</strong>       – float – 0      – init, zoom, 0 – fit to view window, 1.0 – 100%</li>
<li><strong>center_x</strong>   – int   – 0      – init, x coordinate of the original image to be placed in the center of the view window </li>
<li><strong>center_y</strong>   – int   – 0      – init, y coordinate of the original image to be placed in the center of the view window</li>
</ul>


Sravnitel

Sravnitel is a WordPress plugin by Elphel Inc. based on a jQuery plugin jquery.sravnitel.js.

Zayed Baloch

Hammal Albulushi

Naeem Noor

<p>Twenty20 is a professional-grade image comparison tool that helps you showcase transformations in a highly engaging way. Perfect for:</p>
<ul>
<li>Photography portfolios</li>
<li>Real estate before/after</li>
<li>Renovation projects</li>
<li>Design makeovers</li>
<li>Product comparisons</li>
<li>Restoration work</li>
<li>Medical procedures</li>
<li>And much more!</li>
</ul>
<h4>Video Tutorial</h4>
<p><iframe loading="lazy" title="How to Use the Twenty20 Image Before-After Plugin in WordPress | Step-by-Step Tutorial" width="750" height="422" src="https://www.youtube.com/embed/1cQ9rhL-t70?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></p>
<h4>Live Demo</h4>
<p>Check the <a href="https://zayedbaloch.com/twenty20-image-before-after-wordpress-plugin/" title="Twenty20 Live demo" rel="nofollow ugc">Live Demo</a>.</p>
<h4>Key Features</h4>
<ul>
<li>Responsive design – works perfectly on all devices</li>
<li>Horizontal and vertical sliding options</li>
<li>Customizable slider position and orientation</li>
<li>Custom “before” and “after” labels</li>
<li>Adjustable image widths and alignments</li>
<li>Mouse hover sliding effect</li>
<li>Touch-enabled for mobile devices</li>
<li>Multiple sliders per page</li>
<li>Widget support for sidebars</li>
<li>SEO-friendly with proper alt tag support</li>
<li>Accessibility compliant image comparisons</li>
</ul>
<h4>Page Builder Support</h4>
<ul>
<li>Elementor</li>
<li>WPBakery Page Builder (Visual Composer)</li>
<li>Flatsome UX Builder</li>
<li>Classic Editor</li>
</ul>
<h4>Perfect For</h4>
<ul>
<li>Photography before/after edits</li>
<li>Home renovation comparisons</li>
<li>Web design makeovers</li>
<li>Product transformations</li>
<li>Restoration projects</li>
<li>Beauty transformations</li>
<li>Real estate renovations</li>
</ul>
<h3>Usage</h3>
<h4>Shortcode Example</h4>
<p><strong>Quick Example</strong></p>
<pre><code>[twenty20 img1="" img2="" direction="vertical" offset="0.5" align="right" width="60%" before="Before" after="After" hover="true"]
</code></pre>
<p><strong>Shortcode Parameters</strong></p>
<ul>
<li><code>img1</code> – image ID.</li>
<li><code>img2</code> – image ID.</li>
<li><code>offset</code> – range from 0.1 to 1.0.</li>
<li><code>direction</code> – <code>horizontal|vertical</code>.</li>
<li><code>align</code> – <code>none|right|left</code>.</li>
<li><code>width</code> – supports both <code>px</code> and <code>%</code>.</li>
<li><code>before</code> – text for the “before” label.</li>
<li><code>after</code> – text for the “after” label.</li>
<li><code>hover</code> – <code>true</code> or <code>false</code>.</li>
</ul>


Twenty20 Image Before-After

Simple and clear implementation of the Twenty Twenty by Zurb script.  Thanks for saving me a few hours.

Works Well

Professional before & after image comparison slider for WordPress. Create engaging visual comparisons with an intuitive drag & drop interface.

Sravnitel vs Twenty20 Image Before-After