=== TwentyTwenty ===
Contributors: cs123
Tags: images, before-and-after, before and after, comparison, slider, zurb, twentytwenty, twenty twenty
Requires at least: 3.5.1
Tested up to: 3.8.1
Stable tag: 1.0.0
License: GPLv2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html

Show before-and-after pictures in your blog, with an interactive slider that allows users to compare them. 

== Description ==

This plugin brings the power of Zurb TwentyTwenty to your blog. From our friends at Zurb:

> We recently needed a way to showcase the visual differences between two images. Folks tend to typically place two images next to each other in hopes that it'll be clear exactly what changed. We even thought about having one image fade into another. But we knew there had to be an even better way to highlight the differences between two images. A way that would bring everything into focus.

Find out more about TwentyTwenty, and see examples, on the [official TwentyTwenty site from Zurb](http://zurb.com/playground/twentytwenty).

Add two picture to a post or page and surround them with a shortcode to create a before-and-after picture.

== Installation ==

= Using The WordPress Dashboard =

1. Navigate to the 'Add New' in the plugins dashboard
2. Search for 'TwentyTwenty'
3. Click 'Install Now'
4. Activate the plugin on the Plugin dashboard

== Instructions ==

1. **Make sure your before and after images are the same size.** The before-and-after box will use the size of the first image, and assume that the second image is the same size.

2. Insert two images into a post, one right after the other.

3. Before the first image, type `[twentytwenty]`. After the second image, type `[/twentytwenty]`. See the second screenshot for an example.

== Frequently Asked Questions ==

= Why aren't my images lining up properly? =
Make sure that the images are the exact same height and width, and that you choose the same display size for the images when you upload them (ex. medium, large, full size).

= What browsers does this support? =
TwentyTwenty is tested the latest versions of Chrome, Safari, FireFox, and iOS, and on IE 9 and above.

= Can I customize how the slider looks? =
Not yet, but I hope to enable that in a future release?

= Will this work on any WordPress theme? =
It should, but please report any issues on [this blog post](http://aspiringwebdev.com/twentytwenty) or by leaving a review.

== Screenshots ==

1. Before and after images in a post. Images courtesy Abbie Rowe / National Archives.
2. TwentyTwenty shortcodes in the WordPress editor. Images courtesy Abbie Rowe / National Archives.

== Changelog ==

= 1.0 =
* Initial version

== Upgrade Notice ==

= 1.0 =
* Initial version