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.

Tawhid Islam Raihan

Mirza Md. Hasan

Themefic

mdashikul

M Hemel Hasan

Abu Hena

<h4>A Simple and Flexible Before After Image Slider & Gallery Plugin for WordPress</h4>
<p>👉 Official Demo Link: <a href="https://themefic.com/plugins/beaf/?utm_source=wp_readme&utm_medium=beaf_top_slot&utm_campaign=demo_link" rel="nofollow ugc">BEAF Live Preview</a><br />
👉 Explore Pro: <a href="https://themefic.com/plugins/beaf/pro/backend-demo/?utm_source=wp_readme&utm_medium=beaf_top_slot&utm_campaign=pro_backend" rel="nofollow ugc">Play with Backend Options</a><br />
👉 BEAF Pro Version: <a href="https://themefic.com/plugins/beaf/pro/?utm_source=wp_readme&utm_medium=beaf_top_slot&utm_campaign=pro_link" rel="nofollow ugc">Check Pro</a><br />
👉 Documentation: <a href="https://themefic.com/docs/beaf/?utm_source=wp_readme&utm_medium=beaf_top_slot&utm_campaign=plugin_docs" rel="nofollow ugc">Written Installation Guide</a><br />
👉 Video Guide: <a href="https://www.youtube.com/playlist?list=PLY0rtvOwg0ynodV0sVmSRX1OPCSs9mzhz" rel="nofollow ugc">Complete Step by Step Guide</a><br />
👉 Get Support: <a href="https://portal.themefic.com/support/?utm_source=wp_readme&utm_medium=beaf_top_slot&utm_campaign=plugin_support" rel="nofollow ugc">Click Here</a><br />
👉 Join Our FB Community: <a href="https://facebook.com/groups/beaf.wp" rel="nofollow ugc">BEAF Facebook Group</a></p>
<p>Looking for a WordPress Before and After Slider & Gallery plugin? BEAF helps you easily create image comparison sliders for Elementor, Gutenberg, Bricks, WP Bakery, and other page builders. With BEAF, you can effortlessly create a stunning Before and After image comparison slider for elementor, gutenberg, bricks, wp bakery or any page builder or block editor. The best part? You can add an unlimited number of sliders and galleries to your WordPress site—for free!</p>
<p>BEAF also provides advanced features in the Pro version to help you showcase your Before After image portfolio more effectively. This all-in-one Before and After Slider WordPress plugin is packed with a full range of basic to advanced options, giving you everything you need to create eye-catching and beautiful image comparison sliders aka Before After slider:</p>
<ul>
<li>Horizontal or Vertical layout</li>
<li>Multi-Column Before and After Gallery</li>
<li>Title, Description & Read More button</li>
<li>Alt tag on each image for Better SEO</li>
<li>Label Color and Background Change</li>
<li>Disable Overlay</li>
<li>Mouse Hover Options</li>
<li>Easy-to-use option panel</li>
<li>Shortcode generator</li>
<li>10 Preview Styles (Pro)</li>
<li>Filterable Before – After Gallery (Pro)</li>
<li>Before After Video Slider (Pro)</li>
<li>3 Images Before After Slider (Pro)</li>
<li>Single Image Slider (Pro)</li>
<li>Watermark for Before After Images (Pro)</li>
<li>Titles, Description & Read More Button on Single Image BEAF, Gallery and Filterable Gallery (Pro)</li>
<li>Custom Width – Height – Alignment (Pro)</li>
<li>Auto Slider (Pro)</li>
<li>On Scroll Slider (Pro)</li>
<li>Change Read More text (Pro)</li>
<li>Disable slider handle (Pro)</li>
<li>Uploaded Before After Image Preview Without Login(Pro)</li>
</ul>
<p><strong>Demo Link</strong></p>
<blockquote>
<p><a href="https://themefic.com/plugins/beaf/?utm_source=wp_readme&utm_medium=beaf_bottom_slot&utm_campaign=demo_link" rel="nofollow ugc">Check out the demo</a> to see it in action!</p>
</blockquote>
<p>With this Before After WordPress plugin, You can showcase your portfolio by comparing two before and after images.</p>
<p><strong>Pro Version</strong></p>
<blockquote>
<p><a href="https://themefic.com/plugins/beaf/pro/?utm_source=wp_readme&utm_medium=beaf_bottom_slot&utm_campaign=demo_link" rel="nofollow ugc">Check BEAF Pro</a></p>
</blockquote>
<p>We believe the free version is good enough for most businesses. However, we have a <strong>Pro version</strong> of this plugin which has more advanced features including <strong>10 Awesome looking Preview Styles, Before-After with Single Image, 3 Images comparison slider, Before After Video Slider, Multi-Columns Filterable Gallery, Auto Slide, On Scroll Slide</strong> and many more.</p>
<h3>Video Tutorials:</h3>
<span class="embed-youtube" style="text-align:center; display: block;"><iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/h99G8fKVKZQ?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></span>
<span class="embed-youtube" style="text-align:center; display: block;"><iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/Z82qj9ObId4?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></span>
<span class="embed-youtube" style="text-align:center; display: block;"><iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/sO8_u_d4KGg?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></span>
<span class="embed-youtube" style="text-align:center; display: block;"><iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/3IeVJ9bmPeE?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></span>
<span class="embed-youtube" style="text-align:center; display: block;"><iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/btZTh7CKjvI?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></span>
<h3>Before After for WooCommerce:</h3>
<p>Do you need a before and after image slider for WooCommerce? Then check this plugin of ours <a href="https://wordpress.org/plugins/before-after-for-woocommerce" rel="ugc">here</a>.</p>
<h3>Features:</h3>
<p>Here are the most important features of BEAF. If you need any further information, please feel free to contact us. Below are the best offerings of BEAF:</p>
<h4>Multiple layout</h4>
<p>Display Sliders in Horizontal or Vertical Layout. <a href="https://themefic.com/plugins/beaf/#multiple-layout" rel="nofollow ugc">Click here</a> for a quick preview.</p>
<h4>Before and After Gallery</h4>
<p>Create 2 Columns, 3 Columns, and 4 Columns Before After Gallery in WordPress with BEAF. <a href="https://themefic.com/plugins/beaf/#gallery" rel="nofollow ugc">Click here</a> for a quick preview.</p>
<h4>Titles, Description & Read More Button</h4>
<p>You can add the Title, Description & Read More buttons on all the above Preview Styles. Note that, from backend, you can show/hide any/all of the 3 fields (title, description & read more). You can also edit styles (color, font size, alignment) of all 3 fields as shown below. <a href="https://themefic.com/plugins/beaf/#title-desc" rel="nofollow ugc">Click here</a> for a quick preview.</p>
<h4>Label Change</h4>
<p>You can easily change the Label of Before-After to something you want from BEAF’s Option panel. <a href="https://themefic.com/plugins/beaf/#label-change" rel="nofollow ugc">Click here</a> for a quick preview.</p>
<h4>Label Color Change</h4>
<p>You can easily change the color and background of each Label. <a href="https://themefic.com/plugins/beaf/#color-change" rel="nofollow ugc">Click here</a> for a quick preview.</p>
<h4>Disable Overlay</h4>
<p>You can disable the overlay from the options panel. <a href="https://themefic.com/plugins/beaf/#no-overlay" rel="nofollow ugc">Click here</a> for a quick preview.</p>
<h4>Mouse Hover</h4>
<p>You can move slider on Mouse hover. <a href="https://themefic.com/plugins/beaf/#mouse-hover" rel="nofollow ugc">Click here</a> for a quick preview.</p>
<h4>Image Alt tag</h4>
<p>You can add Alt tag on each images for Better SEO.</p>
<h4>Easy-to-use Option Panel</h4>
<p>BEAF has built in easy-to-use option panel. You can add or remove any options from this panel.</p>
<h4>Shortcode Generator</h4>
<p>After your publish, a shortcode will generate so that you can publish the slider anywhere on your website.</p>
<h4>More Features</h4>
<ul>
<li>
<p><strong>Support for Block Editor & popular page builders:</strong> BEAF is fully compatible with Gutenberg & popular page builders like Elementor, Bricks WP Bakery, DIVI, Beaver etc. See the list below.</p>
</li>
<li>
<p><strong>Responsive and Touch Compatibility</strong> : BEAF is fully responsive and also supports touch on mobile devices.</p>
</li>
<li>
<p><strong>Awesome UI:</strong> Easy and clean user interface</p>
</li>
<li>
<p><strong>Lightweight:</strong> The plugin is so lightweight that it won’t impact much on your speed.</p>
</li>
<li>
<p><strong>Speed optimized:</strong> Compatible with any lazy load plugins. It also works with WEBP images.</p>
</li>
<li>
<p><strong>Unlimited Slider:</strong> You can create an unlimited number of slider</p>
</li>
<li>
<p><strong>SEO Friendly:</strong> Support WP Image alt as image alt and title.</p>
</li>
<li>
<p><strong>Live Preview:</strong> See the preview of the slider/gallery while editing</p>
</li>
<li>
<p><strong>Widget Support:</strong> Add before-after through widgets.</p>
</li>
<li>
<p><strong>Flexible Image</strong> — You can use any image size.</p>
</li>
</ul>
<p><strong>Supported Page Builders :</strong></p>
<ul>
<li><strong>Elementor before and after slider:</strong> BEAF has built-in before after elementor addons for creating before and after slider with elementor.</li>
<li><strong>Bricks Builder:</strong> Since BEAF uses shortcodes, you can effortlessly create Bricks Builder Before and After slider or gallery.</li>
<li><strong>WP Bakery / Visual Composer:</strong> With BEAF’s shortcode functionality, creating a Before After slider in WP Bakery or Visual Composer is simple and quick.</li>
<li><strong>Divi Page Builder:</strong> Thanks to our shortcode-based system, you can easily build Divi Before and After slider.</li>
<li><strong>Beaver Builder:</strong> Using BEAF shortcodes, you can seamlessly create Beaver Builder Before-After slider.</li>
<li><strong>Gutenberg:</strong> BEAF’s shortcode system allows you to easily create Gutenberg Before After slider or gallery.</li>
</ul>
<h3>Pro Features</h3>
<p>You will get more features and advantages on the pro version. Here are few feature of the Pro Version:</p>
<ul>
<li>10 Preview Styles</li>
<li>Filterable Before – After Gallery</li>
<li>3 Images Comparison Slider</li>
<li>Before After Video Slider</li>
<li>Watermark for Images</li>
<li>Single Image Slider</li>
<li>Titles, Description & Read More Button on Single Image BEAF, Gallery and Filterable Gallery</li>
<li>Custom Width – Height – Alignment</li>
<li>Auto Slider</li>
<li>On Scroll Slider</li>
<li>Change Read More text</li>
<li>Disable slider handle</li>
</ul>
<h4>All Free Features</h4>
<p>The Pro version includes all the features of the Free version (as described above). Plus:</p>
<h4>10 Preview Styles</h4>
<p>The Pro version includes 10 Additional Awesome looking Preview Styles. <a href="https://themefic.com/plugins/beaf/pro/preview-styles" rel="nofollow ugc">Click here</a> for a quick preview.</p>
<h4>Filterable Before – After Gallery</h4>
<p>Create 2 Columns, 3 Columns and 4 Columns Filterable Before After Gallery in WordPress with BEAF Pro. The galleries can be combination of all the above mentioned Preview Styles & Single Image Styles. The color and padding of the filters can be edited from the options panel. <a href="https://themefic.com/plugins/beaf/pro/filterable-gallery/" rel="nofollow ugc">Click here</a> for a quick preview.</p>
<h4>Three Images Comparison Slider</h4>
<p>Create slider with 3 images. <a href="https://themefic.com/plugins/beaf/pro/3-images-slider/" rel="nofollow ugc">Click here</a> for a quick preview.</p>
<h4>Before After Video Slider</h4>
<p>Create slider with 2 different videos. <a href="https://themefic.com/plugins/beaf/pro/video-slider/" rel="nofollow ugc">Click here</a> for a quick preview.</p>
<h4>Image Watermark</h4>
<p>Create slider with Watermark in Images. Fully Customizable based on available options. <a href="https://themefic.com/plugins/beaf/pro/image-watermark" rel="nofollow ugc">Click here</a> for a quick preview.</p>
<h4>Single Image Slider</h4>
<p>Create slider using a single image. The Single image has filter effects like <a href="https://themefic.com/plugins/beaf/pro/before-after-with-single-image/#grayscale" rel="nofollow ugc">Grayscale</a>, <a href="https://themefic.com/plugins/beaf/pro/before-after-with-single-image/#blur" rel="nofollow ugc">Blur</a>, <a href="https://themefic.com/plugins/beaf/pro/before-after-with-single-image/#saturate" rel="nofollow ugc">Saturate</a>, <a href="https://themefic.com/plugins/beaf/pro/before-after-with-single-image/#sepia" rel="nofollow ugc">Sepia</a> etc. The filter can be added on Before or After image.</p>
<h4>Titles, Description & Read More Button on Single Image</h4>
<p>You can add Title, Description & Read More button on <a href="https://themefic.com/plugins/beaf/pro/before-after-with-single-image/#title" rel="nofollow ugc">Single Image Slider</a>, <a href="https://themefic.com/plugins/beaf/pro/before-after-with-single-image/#image-gallery" rel="nofollow ugc">Normal Gallery</a> and <a href="https://themefic.com/plugins/beaf/pro/before-after-with-single-image/#filterable-gallery" rel="nofollow ugc">Filterable Gallery</a>.</p>
<h4>Custom Width – Height – Alignment</h4>
<p>Setup Custom Width – Height – Alignment for each slider. <a href="https://themefic.com/plugins/beaf/pro/width-height-alignment" rel="nofollow ugc">Click here</a> for a quick preview.</p>
<h4>Auto Slider</h4>
<p>Slider will slide automatically. Options to add Pause on hover. <a href="https://themefic.com/plugins/beaf/pro/auto-slider/" rel="nofollow ugc">Click here</a> for a quick preview.</p>
<h4>On Scroll Slider</h4>
<p>Slider will slide on Scroll (based on User Scrolling). <a href="https://themefic.com/plugins/beaf/pro/on-scroll-slider/" rel="nofollow ugc">Click here</a> for a quick preview.</p>
<h4>Disable slider handle</h4>
<p>You can easily disable the slider handle. <a href="https://themefic.com/plugins/pro/common-options/#disable" rel="nofollow ugc">Click here</a> for a quick preview.</p>
<h3>Our Support</h3>
<p>Yes, we provide full support on the WordPress.org forums & <a href="https://portal.themefic.com/support/" rel="nofollow ugc">Our Website</a>. You can also join our <a href="https://facebook.com/groups/beaf.wp" rel="nofollow ugc">BEAF Facebook Group</a> to stay informed with latest news and updatesc.  Check our <a href="https://themefic.com/support-policy/" rel="nofollow ugc">Support Policy</a>.</p>
<h3>Privacy Policy</h3>
<p>Ultimate Before After Image Slider & Gallery – BEAF uses <a href="https://appsero.com/" rel="nofollow ugc">Appsero</a> SDK to collect some telemetry data. Appsero SDK does not gather any data by default. The SDK only starts gathering basic telemetry data when a user allows it via the admin notice. Appsero SDK DOES NOT IMMEDIATELY start gathering data, without confirmation from users in any case. We use this data to troubleshoot problems faster, make product improvements & ensure a great user experience for all our users.</p>
<h3>Credit</h3>
<p>BEAF is based on the famous <a href="https://zurb.com/playground/twentytwenty" rel="nofollow ugc">TwentyTwenty</a> script that developed by Zurb team. Our icon is taken from <a href="https://iconfinder.com/" rel="nofollow ugc">Iconfinder</a>.</p>
<h3>How can I report security bugs?</h3>
<p>You can report security bugs through the Patchstack Vulnerability Disclosure Program. The Patchstack team help validate, triage and handle any security vulnerabilities. <a href="https://patchstack.com/database/vdp/beaf-before-and-after-gallery" rel="nofollow ugc">Report a security vulnerability</a>.</p>
<h3>Our Plugins</h3>
<ul>
<li><a href="https://wordpress.org/plugins/tourfic" rel="ugc">Tourfic – Ultimate Hotel Booking, Travel Booking & Apartment Booking WordPress Plugin</a></li>
<li><a href="https://wordpress.org/plugins/ultimate-addons-for-contact-form-7/" rel="ugc">Ultimate Addons For Contact Form 7</a></li>
<li><a href="https://wordpress.org/plugins/instantio" rel="ugc">Instantio – WooCommerce Quick Checkout | Floating Cart, Side Cart & Popup Cart</a></li>
<li><a href="https://wordpress.org/plugins/hydra-booking" rel="ugc">Hydra Booking – All in One Appointment Scheduling and Booking Calendar Solution</a></li>
<li><a href="https://wordpress.org/plugins/reviewfic/" rel="ugc">Reviewfic – The Ultimate Testimonial Slider, Carousel, Grid Plugin</a></li>
</ul>
<h3>Our Themes</h3>
<ul>
<li><a href="https://wordpress.org/themes/travelfic/" rel="ugc">Travelfic – Ultimate Travel Booking WordPress Theme</a></li>
<li><a href="https://wordpress.org/themes/ultimate-hotel-booking/" rel="ugc">Ultimate Hotel Booking WordPress Theme</a></li>
</ul>


Ultimate Before After Image Slider & Gallery – BEAF


Works great for us! We can't add links but I want to show it to you in action: enviroarch.com > commercial > photographer-office














Works very nicely


Spam - spamming my entire site's backend w/ your BF campaign. 


Annoying Black Friday banner

Need a Before After Image Comparison slider? Create your before and after slider with BEAF. Addon for Elementor Before and After Slider is included.

Sravnitel vs Ultimate Before After Image Slider & Gallery – BEAF