Download

Twenty20 Image Before-After

By Zayed Baloch

Description

Twenty20 is the WordPress plugin of TwentyTwenty script that developed by Zurb team.

This sparked a few new ideas on how to do something similar for our own needs. It had to swipe between two images to show “before” and “after”. Most of all, it had to be responsive.

Features

  • Responsive and functional on all devices.
  • Doesn’t require images to work.
  • Easy and clean user interface
  • Add before-after on widgets.
  • Support popular page builders.
  • Support WP Image alt as image alt and title.

Support Page Builders

  • WP Bakery Visual Composer.
  • 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.
  • direction – horizontal|vertical.
  • align – none|right|left.
  • width – Support both px and %.
  • before – Text.
  • after – Text.
  • hover – true or false.

Video Demo

Screenshots

  • Add Twenty20 before-after image.
  • Select any two images fro Media libray.
  • Twenty20 Shortcode setting page.
  • Shortcod.
  • Twenty20 in action.
  • Multiple slider in different direction.
  • Twenty20 Widgest.
  • Widget in action.
  • WP Bakery Visual Composer settings.
  • Elementor element.
  • UX Builder element.

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.

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.

Reviews

Brilliant! It just worked and works well.

03. srpnja 2020.
I needed a before and after plugin for my website, as I create visual effects and it would be very handy to show clients. This plugin is so simple and works really well. Within a minute of downloading I had a before and after test up on my site. Thank you so very much guys!

heavy plug in?

04. travnja 2020.
I love the plugin and that unlike others its free, so i really appreciate it. However it makes my page run more slowly. On my landing page I have only short text + twenty20 before/after photo. and that page is the slowliest. The photos are already compressed so the size should not be a problem, so the speed, especially at this page with nothing else on it. I wonder is it just my theme, or is it general issue? Any fixes for this? Also i had an issue, that I could not change the size of the photos. at some point, the photos were huuge, so person had to scrol to see it all. It fixed, when I changed ''layout page size'' But.. i still wonder it there is some CSS for sizing? PS: i am on theme BRIDGE. I would not reccomend this theme to my worst enemy, since its very heavy [so waiting for better times and developer to change it so it looks same but with better responsive theme] so yes, regarding the speed issue, the Theme is 90% at fault, but the speed got even worse with twenty20. Thanks

Works Suberb

06. ožujka 2020.
Easy to use (one click button) - no need to code, although it has a simple user-end code. Works really fine, works on Woocomerce product page, responsive with enough options! Thank you Mr.!

Super simple image slider!

15. veljače 2020.
This plugin is exactly what it says. It's a quick and easy way to set up a comparison slider for two images I had uploaded to my media library. Worked first try, and I'm super happy.
Pročitajte 41 recenziju

Suradnici i Programeri

“Twenty20 Image Before-After” is open source software. The following people have contributed to this plugin.

Contributors

Prevedite “Twenty20 Image Before-After” na svoj jezik.

Interested in development?

Browse the code, check out the SVN repository, or subscribe to the development log by RSS.

Changelog

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

Meta

Ocjena

Prikaži sve
Log in to submit a review.

Podrška

Problemi riješeni u zadnja dva mjeseca:

0 od 7

Pregledaj forum za podršku

Doniraj

Želite li podržati napredak ovog dodatka?

Donirajte ovom dodatku