Authentic Lessons for 21st Century Learning

Juxtapose JS

Teresa Lansford | Published: August 26th, 2021 by K20 Center

Card

Cover Image

Juxtapose JS

Juxtapose JS enables students and teachers to combine images for powerful comparisons. The website uses images that the user finds online and overlays them along with a click-and-drag slider for point-by-point comparisons.

Juxtapose JS

Summary

Juxtapose JS is an interface that enables users to compare any two photos or images side-by-side. Users begin by selecting two images online that they would like to compare. The images can be anything that has changed over time such as maps, aerial shots, money, or works of art. Using the Knightlab website, users paste the image URLs and sources into the Juxtapose JS fields. Selecting “publish” creates an overlay of the images with a slider so that the two images can be compared point by point as the user scrolls across the images to reveal more of each.

Procedure

  1. Find two images online that you would like to compare (make sure they are free for use). Copy their image URLs by right-clicking and choosing “copy image address.” Make note of the image source for crediting on the Juxtapose JS site. 

  2. Visit https://juxtapose.knightlab.com.

  3. Enter image information into the fields.

  4. Choose “preview” or “publish.”

  5. When you are satisfied with your product, copy the link information to share your comparison.

Knightlab.(2020). JuxtaposeJS. Northwestern University. https://juxtapose.knightlab.com/