JuxtaposeJS

Example of a JuxtaposeJS project.

About

JuxtaposeJS, just like its relatives, StorymapJS and TimelineJS, is a digital tool powered by Northwestern University’s Knightlab with a purpose to create a digital storytelling experience for creators to share with their viewers. This tool compares two pieces of media, pictures or GIFs, with the intent to show change overtime.

The following Juxtapose was created for another page on this site. Try dragging the separator to see both images in full.

Getting Started

To begin using this tool, you will need:

  • The URLs of two images or gifs of the same size (direct URLs usually end with .png, .jpg, or .jpeg)
  • Proper alignment for both images for clear comparison
  • Credit for images with labels in mind

Tutorial

This is the main place for editing that you are directed to from the home page of the website.

After clicking publish, you are given a link to share your work or a code to embed this tool into your website.

Limitations

JuxtaposeJS is very sensitive to sizing and requires some editing beforehand to guarantee proper sizing. Because this tool uses URLs for upload, consider trying Dropbox if you wish to edit photos beforehand without having to upload your edits on a media platform like Flickr.

Documentation

css.php