Gorgeous before-and-after pictures in WordPress

TwentyTwenty from Zurb makes it easy to show before-and-after pictures on a web page. As Zurb puts it, it showcases the differences between two images.

Now, it’s available as a WordPress plugin! Building it was fun, and I’ll post a plugin development tutorial soon based on the experience.

Here’s one example, the Blue Room in White House pre and post construction:

Images above courtesy Abbie Rowe / National Archives

And a makeover from a previous post on this blog:

Check out TwentyTwenty on the WordPress plugin directory, or watch this screencast to see how it works:

New: see a tutorial in Spanish, thanks to webempresa

Hired.com brings Rails job offers to you. Free for candidates. Salaries from $75,000 to $250,000. Sign up now!

17 thoughts on “Gorgeous before-and-after pictures in WordPress”

  1. I am using the twenty-twenty plugin on my WP site. I recently changed themes and the center circle with left and right arrows is broken. Do you know if I can fix it ?

  2. This is working fine on my Android phone and also iPhone, but no images are visible when viewed on my iMac or PC.
    I’m using the latest version of WordPress, running Mavericks and Windows 8.
    I’m also using a Themeforest template for my site ‘Chocolate’. It’s a couple of years old and needs updating.
    Are there any known plugin conflicts, I have Jetpack and SEO Friendly Images installed.
    Thank you.

  3. Great plugin! Does your plugin have the capability (as the NWU Knightlab Juxtapose tool) to specify the start position of the slider bar? We get many requests to set it at 30% left or right but I don’t see it in your documentation, but prefer your in-WordPress flexibiltiy versus Knightlab. Thanks in advance for your attention, Joe.

Leave a Reply