okdzhimiev

Sravnitel is a WordPress plugin by Elphel Inc. based on a jQuery plugin jquery.sravnitel.js.
Features
<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>
Tips
<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>
Working demo
<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>
Quick examples
<ul>
<li>Fit image into the view window, w/o titles: 
[sravnitel images=”ID0,ID1,ID2″ width=640 height=480]</li>
<li>Fit image into the view window, with titles and toggle button: 
[sravnitel images=”ID0,ID1,ID2″ width=640 height=480 showtitles=true showtoggle=true]</li>
<li>Also fit image, with titles: 
[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: 
[sravnitel images=’ID0,ID1,ID2′ width=640 height=480 showtitles=true zoom=0.3 center_x=0 center_y=0]</li>
</ul>
Shortcode Parameters
<ul>
<li>id – int – 0 – wrapper’s <div> element id</li>
<li>images – str – ” – (required) list of images ids (attachment_id), comma separated</li>
<li>width – int – 530 – view window width px</li>
<li>height – int – 300 – view window height px</li>
<li>showtitles – bool – false – show/hide titles</li>
<li>showtoggle – bool – false – show/hide button – switch between left and right image</li>
<li>index_l – int – 0 – init, left image – is the index of the images array, starting from 0</li>
<li>index_r – int – 1 – init, right image – is the index of the images array, starting from 0</li>
<li>zoom – float – 0 – init, zoom, 0 – fit to view window, 1.0 – 100%</li>
<li>center_x – int – 0 – init, x coordinate of the original image to be placed in the center of the view window </li>
<li>center_y – 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.

Binsaifullah

Beaf is a custom Gutenberg Block based plugin that is developed with Gutenberg Native Components. You can easily showcase the Photo Comparison. It comes with different styles and settings so that you can easily customize it as per your needs. It is a lite version of Beaf Pro. To get more features and options, you can check the <a href="https://beaf.gutenbergkits.com" rel="nofollow ugc">Beaf Pro</a>.
<h3>Overview</h3>
<ul>
<li><a href="https://beaf.gutenbergkits.com/demos" rel="nofollow ugc">See Demos</a></li>
<li><a href="https://beaf.gutenbergkits.com" rel="nofollow ugc">Get Beaf Pro</a></li>
</ul>
<iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/OylHrkczwK4?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe>
<h3>Key Features</h3>
<ul>
<li>Simple, light-weight, and super-fast</li>
<li>Built with only Gutenberg Native Components</li>
<li>No Block Builder at all</li>
<li>100% Responsive</li>
<li>Horizontal & Vertical View</li>
<li>Images Comparison Options
<ul>
<li>Before & After Label</li>
<li>Comparison start on Hover</li>
<li>Horizontal & Vertical Comparison</li>
</ul>
</li>
<li>Easy to Use in Gutenberg Editor</li>
<li>Drag & Drop Use</li>
<li>No jQuery dependency</li>
</ul>
<h4>Beaf Pro features</h4>
<ul>
<li>3 Content Types (Image, Video, Iframe – Google Map)</li>
<li>Custom Label Styles</li>
<li>Custom Label Position</li>
<li>Custom Label Typography</li>
<li>Labels Animation Options</li>
<li>Custom Comparison Starting Point </li>
<li>Custom Comparison Line</li>
<li>Custom Comparison Line Color</li>
<li>Custom Comparison Line Thickness</li>
<li>Custom Caption for beaf slider</li>
</ul>
Beaf Pro is a premium version of Beaf. You can get more features and options in Beaf Pro. <a href="https://beaf.gutenbergkits.com" rel="nofollow ugc">Get Beaf Pro</a>

Beaf – Photo Comparison Block

Beaf is a Gutenberg Block developed with Gutenberg Native Components to showcase photo Comparison with different styles.

Sravnitel vs Beaf – Photo Comparison Block