Twenty20 Image Before-After

July 09, 2024

Twenty20 Image Before-After Plugin

Need to highlight the differences between two images? Makes it easy with Twenty20 plugin.

This inspired several new ideas for how to achieve similar functionality for our own needs. The goal was to create a feature that allows users to swipe between two images to display “before” and “after” comparisons. Most importantly, it needed to be responsive.

Features

  • Fully responsive and functional across all devices.
  • No coding skills required; easy to use.
  • Clean and intuitive user interface.
  • Ability to add before-and-after comparisons to widgets.
  • Compatible with popular page builders.
  • Utilizes WP Image alt as image alt and title attributes.

Support Page Builders

  • Elementor Page Builder.
  • UX Builder by UXThemes.

Quick Example

[twenty20 img1="" img2="" direction="vertical" offset="0.5" align="right" width="60%" before="Before" after="After" hover="true"] 

Shortcode Parameters

  • img1 – image id.
  • img1 – image id.
  • offset – 0.1 to 1.0.
  • directionhorizontal|vertical.
  • alignnone|right|left.
  • width – Support both px and %.
  • before – Text.
  • after – Text.
  • hover – true or false.

Video Demo

Installation

  1. Unzip the download package
  2. Upload twenty20 to the /wp-content/plugins/ directory
  3. Activate the plugin through the ‘Plugins’ menu in WordPress

Manual Plugin Installation

  1. Download Twenty20 Plugin to your desktop.
  2. If downloaded as a zip archive, extract the Plugin folder to your desktop.
  3. With your FTP program, upload the Plugin folder to the wp-content/plugins folder in your WordPress directory online.
  4. Go to Plugins screen and find Twenty20 Plugin in the list.
  5. Click Activate Plugin to activate it.

Screenshots

  1. Add Twenty20 before-after image.

    Add Twenty20 before-after image.

  2. Select any two images fro Media libray.

    Select any two images fro Media libray.

  3. Twenty20 Shortcode setting page.

    Twenty20 Shortcode setting page.

  4. Shortcod.

    Shortcod.

  5. Twenty20 in action.

    Twenty20 in action.

  6. Multiple slider in different direction.

    Multiple slider in different direction.

  7. Twenty20 Widgest.

    Twenty20 Widgest.

  8. Widget in action.

    Widget in action.

  9. WP Bakery Visual Composer settings.

    WP Bakery Visual Composer settings.

  10. Elementor element.

    Elementor element.

  11. UX Builder element.

    UX Builder element.

FAQ

How it works?

Twenty20 works by stacking two images on top of each other. As the slider moves across the image.

Quick Example

[twenty20 img1=”” img2=”” direction=”vertical” offset=”0.5″ align=”right” width=”60%” before=”Before” after=”After” hover=”true”]

Shortcode Parameters

  • img1 - image id.
  • img1 - image id.
  • offset - 0.1 to 1.0.
  • direction - horizontal|vertical.
  • align - none|right|left.
  • width - Support both px and %.
  • before - string text.
  • after - string text.
  • hover - true|false.

How to add before-after slider?

Check the demo Video demo.

How to add widget

Check the demo Video demo.

Can I use more than one slider in single post or page

Yes, Twenty20 plugin allow user to add unlimited before-after slider.

Changelog

1.7.2

  • Improve script

1.7.1

  • Bug fixes

1.7.0

  • Bug fixes

1.6.1

  • Bug fixes.

1.6.0

  • Security fixes, and passed in WordPress review.

1.5.9

  • Security fixes

1.5.8

  • Fix: Minor jQuery fix

1.5.7

  • Fix: WP 5.6 Uncaught TypeError (Thanks to @negru13)

1.5.6

  • Fix: Jetpackā€™s lazy load images issue

1.5.5

  • Fix: Widget mouse over.

1.5.4

  • Added: Integrated with WP Image alt.

1.5.3

  • Fixed cation overlay issue.

1.5.2

  • Fixed Before and After shortcode insert issue

1.5.1

  • Fixed loading issue

1.5

  • NEW: Add Elementor Page builder support.
  • NEW: Add UX Builder by UXThemes support.
  • Minor CSS fixes

1.4

  • NEW: ‘Move slider on mouse over’.

1.3

  • NEW: Image Before and After caption.
  • Fixed arrow shadow css.
  • Widget updated.

1.2

  • Fixed alignment bug

1.1

  • Fixed width issue

1.0

  • First Release

Details

  • Version: 1.7.2
  • Active installations: 30,000
  • WordPress Version: 5.5
  • Tested up to: 6.6.1
  • PHP Version: 5.6

Ratings


5 Stars
4 Stars
3 Stars
2 Stars
1 Stars