JuxtaposeJS

Frame comparisons. Easy to make. Seamless to publish.

Make a slider now

What is it?

JuxtaposeJS helps storytellers compare two pieces of similar media, including photos, and GIFs. It’s ideal for highlighting then/now stories that explain slow changes over time (growth of a city skyline, regrowth of a forest, etc.) or before/after stories that show the impact of single dramatic events (natural disasters, protests, wars, etc.).

It is free, easy to use, and works on all devices. All you need to get started are links to the images you'd like to compare.

Create a Juxtapose slider

Left image
or
Right image
or

+If you don't have a web server for your images, you can host them on Flickr, Dropbox, or Google Drive.

Slider start position
% (use current position)

+You don't have to start with the slider in the middle. You can set it anywhere if that tells your story better.

Options

Preview

Publishing the slider

Everything above look right? Awesome.

Copy the code in the box below and paste it into your web page or CMS. If you update the settings, don't forget to click "Publish" again.

To embed in a Medium blog post, copy the code in the box below and paste it on a line by itself where you want your juxtapose to appear. (Learn more about oEmbed.) If you update the settings, don't forget to click "Publish" again.

Help

Have questions? Look below and see if your question is in the frequently asked questions.

Absolutely not. JuxtaposeJS is friction-free. If you have the links to two images, you are ready to use JuxtaposeJS.

In it's simplest form, JuxtaposeJS is embedded using an <iframe> tag. In this form, there's no way to customize the appearance.

If you are comfortable integrating markup and javascript into your own page, you can go beyond the <iframe>. JuxtaposeJS is designed with a minimalist style meant to work with most websites. If you want to customize the appearance, you can change most of how it looks with CSS rules. Read more on the Github Wiki.

Yes, JuxtaposeJS works normally on iOS devices.
Absolutely. Fork the project and get involved. Send us feedback. Help us make JuxtaposeJS the tool you need and want it to be.

About JuxtaposeJS

JuxtaposeJS is one of a series of tools for content creators produced by the Northwestern University Knight Lab. It was created by Medill student Alex Duner.

This project's source code is hosted on GitHub. We encourage you to contribute to the project and we value your feedback. Feel free to report bugs and discuss features on the GitHub issues page. You can also send email to support@knightlab.zendesk.com.

Examples

Have you used JuxtaposeJS? Let us know, and we might feature your work here.