urlscan.io logo urlscan.io
SecurityTrails logo

juxtapose.knightlab.com Open in urlscan Pro
23.23.237.182  Public Scan

Back to summary
Submitted URL: http://juxtapose.knightlab.com/
Effective URL: https://juxtapose.knightlab.com/
Submission: On June 09 via api from US — Scanned from DE

Form analysis 1 forms found in the DOM

<form id="authoring-form">
  <h4>Images</h4>
  <p class="gif-content" style="display: none;">For GIF Juxtapose, you can upload images from your computer or from Dropbox, or provide direct URLs to images. Make sure your images are the same size, or at least the same aspect ratio.</p>
  <p class="interactive-content">For interactive Juxtapose, you can load images from Dropbox, or provide direct URLs to images. We don't support uploads for interactive Juxtapose. </p>
  <div class="grid">
    <div class="column-6">
      <h6>Left Image</h6>
      <div class="gif-content upload-box" style="display: none;">
        <div id="image-upload-wrap-1" class="image-upload-wrap">
          <input id="file-upload-input-1" class="file-upload-input" type="file" onchange="readURL(this, '1');" accept="image/*">
          <div id="drag-text-1" class="drag-text">
            <h3>drag and drop or click to upload an image</h3>
          </div>
        </div>
        <div id="file-upload-content-1" class="file-upload-content">
          <button id="remove-image-1" type="button" onclick="removeUpload('1')" class="button button-primary button-smallest remove-image">remove image</button>
          <img id="file-upload-image-1" class="file-upload-image" src="#" alt="your image">
        </div>
      </div>
      <div class="input-group-label interactive-content">
        <label class="input-group-addon" for="inlinelabel">URL</label>
        <input id="before-src" class="urlBox auto-update" type="text" value="https://juxtapose.knightlab.com/static/img/Sochi_11April2005.jpg" name="inlinelabel">
        <a class="button button-light button-smallest dropbox-picker" data-image="before"><span class="icon-dropbox"></span></a>
      </div>
      <div class="input-group-label gif-content" style="display: none;">
        <label class="input-group-addon" for="inlinelabel">URL</label>
        <input id="gif-before-src" class="urlBox auto-update" onchange="gifBeforeChange()" type="text" value="" name="inlinelabel">
        <a class="button button-light button-smallest dropbox-picker" data-image="before"><span class="icon-dropbox"></span></a>
      </div>
      <div class="grid interactive-content">
        <div class="grid-item">
          <div class="input-group-label">
            <label class="input-group-addon" for="inlinelabel">Label</label>
            <input id="before-label" class="auto-update" type="text" placeholder="Apr. 2005" name="inlinelabel">
          </div>
        </div>
        <div class="grid-item">
          <div class="input-group-label">
            <label class="input-group-addon" for="inlinelabel">Credit</label>
            <input id="before-credit" class="auto-update" type="text" placeholder="Google Earth" name="inlinelabel">
          </div>
        </div>
      </div>
    </div>
    <div class="column-6" id="right-image">
      <h6>Right Image</h6>
      <div class="gif-content upload-box" style="display: none;">
        <div id="image-upload-wrap-2" class="image-upload-wrap">
          <input id="file-upload-input-2" class="file-upload-input" type="file" onchange="readURL(this, '2');" accept="image/*">
          <div id="drag-text-2" class="drag-text">
            <h3>drag and drop or click to upload an image</h3>
          </div>
        </div>
        <div id="file-upload-content-2" class="file-upload-content">
          <button id="remove-image-2" type="button" onclick="removeUpload('2')" class="button button-primary button-smallest remove-image">remove image</button>
          <img id="file-upload-image-2" class="file-upload-image" src="#" alt="your image">
        </div>
      </div>
      <div class="input-group-label interactive-content">
        <label class="input-group-addon" for="inlinelabel">URL</label>
        <input id="after-src" class="urlBox auto-update" type="text" value="https://juxtapose.knightlab.com/static/img/Sochi_22Nov2013.jpg" name="inlinelabel">
        <a class="button button-light button-smallest dropbox-picker" data-image="after"><span class="icon-dropbox"></span></a>
      </div>
      <div class="input-group-label gif-content" style="display: none;">
        <label class="input-group-addon" for="inlinelabel">URL</label>
        <input id="gif-after-src" class="urlBox auto-update" onchange="gifAfterChange()" type="text" value="" name="inlinelabel">
        <a class="button button-light button-smallest dropbox-picker" data-image="after"><span class="icon-dropbox"></span></a>
      </div>
      <div class="grid interactive-content">
        <div class="grid-item">
          <div class="input-group-label">
            <label class="input-group-addon" for="inlinelabel">Label</label>
            <input id="after-label" class="auto-update" type="text" placeholder="Apr. 2005" name="inlinelabel">
          </div>
        </div>
        <div class="grid-item">
          <div class="input-group-label">
            <label class="input-group-addon" for="inlinelabel">Credit</label>
            <input id="after-credit" class="auto-update" type="text" placeholder="Google Earth" name="inlinelabel">
          </div>
        </div>
      </div>
    </div>
    <div class="column-12 interactive-content">
      <h4>Options</h4>
      <div class="input-group-label">
        <label for="slider-start">Slider start position</label>
        <input id="starting-position" type="number" size="2" placeholder="50" value="50" min="0" max="100" name="slider-start" step="1" style=" width: 70px;">
        <div class="input-group-addon">%</div>
      </div>
      <div class="input-group-checkbox">
        <label for="show-labels">
          <input id="show-labels" class="auto-update" type="checkbox" value="true" checked="">
          <div class="button">Show Labels</div>
        </label>
        <label for="show-credits">
          <input id="show-credits" class="auto-update" type="checkbox" value="true" checked="">
          <div class="button">Show Credits</div>
        </label>
        <label for="animate">
          <input id="animate" class="auto-update" type="checkbox" value="true" checked="">
          <div class="button">Animate</div>
        </label>
        <label for="make-responsive">
          <input id="make-responsive" class="auto-update" type="checkbox" value="true" checked="">
          <div class="button">Make Responsive</div>
        </label>
        <label for="vertical">
          <input id="vertical" class="auto-update" type="checkbox" value="false">
          <div class="button">Vertical</div>
        </label>
      </div>
    </div>
    <div id="preview-embed" class="container column-12">
      <div class="container">
        <h3>Preview</h3>
      </div>
      <div id="preview-container" class="container interactive-content" style="width: 100%;">
        <div id="create-slider-preview" class="juxtapose" style="height: 540px; width: 960px;">
          <div class="jx-slider">
            <div class="jx-handle" style="left: 50%;">
              <div class="jx-arrow jx-left"></div>
              <div class="jx-control">
                <div class="jx-controller" tabindex="0" role="slider" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
              </div>
              <div class="jx-arrow jx-right"></div>
            </div>
            <div class="jx-image jx-left" style="width: 50%;"><img src="https://juxtapose.knightlab.com/static/img/Sochi_11April2005.jpg" alt=""></div>
            <div class="jx-image jx-right" style="width: 50%;"><img src="https://juxtapose.knightlab.com/static/img/Sochi_22Nov2013.jpg" alt=""></div>
            <a href="https://juxtapose.knightlab.com" target="_blank" rel="noopener" class="jx-knightlab"><div class="knightlab-logo"></div><span class="juxtapose-name">JuxtaposeJS</span></a>
          </div>
        </div>
      </div>
      <div id="slider-preview-warning" class="grid interactive-content">
        <div class="alert alert-danger warning column-12 note" role="alert"> <span class="icon icon-exclamation-sign" aria-hidden="true"></span> <span class="error-message">One or both of your photos is larger than your browser window. The preview
            below has been resized to fit your screen, but your embedded Juxtapose will retain your original image dimensions.</span> </div>
      </div>
      <div id="preview-container" class="container gif-content" style="margin-top: 2.5%; width: 100%; display: none;">
        <a id="generate-gif" onclick="generateGIF()" class="button button-complement">Generate GIF</a>
        <a id="download-gif" class="button button-light" style="display: none;">Download</a>
        <div class="loader" id="loader-spinner" style="display: none;"></div>
        <div id="gif-container" style="background-color: #d7f1fc;"></div>
      </div>
    </div>
    <div class="column-12 interactive-content">
      <div class="container">
        <a id="publish-slider" class="button button-complement button-large">Publish</a>
      </div>
      <div class="show-after-publish">
        <h6>Share Link</h6>
        <p class="small">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.
          (<a href="https://knightlab.northwestern.edu/2016/06/15/knight-lab-tools-now-embeddable-on-medium/" target="_blank">Learn more about oEmbed.</a>) If you update the settings, don't forget to click "Publish" again.</p>
        <textarea id="oembed-url" rows="3" type="text" readonly="readonly" name="textplaceholder" value="" style="height:4rem;"></textarea>
        <h6>Embed</h6>
        <p class="small">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.</p>
        <textarea id="embed-code" rows="3" readonly="readonly" type="text" name="textplaceholder" value="" style="height:5rem;"></textarea>
      </div>
    </div>
  </div>
</form>

Text Content

 * 

 * Projects
 * Class
 * Device Lab
 * Posts
 * Community
 * About


JUXTAPOSE JS


EASY-TO-MAKE FRAME COMPARISONS.

Make a Juxtapose


 * JUXTAPOSE JS

 * Overview
 * Examples
 * Make a Juxtapose
 * Help

Juxtapose helps you tell a story comparing two images. It supports two different
approaches; choose the one that works best for you:


INTERACTIVE

Apr. 2005
Nov. 2013

JuxtaposeJS

An interactive juxtapose gives your audience control over the slider, and
supports simple labels. You can embed it on a web page, or send someone a direct
link.


GIF

A GIF juxtapose automatically animates the transition between your two images.
It is ideal for embedding on social media, slideshows, and other documents.

Juxtapose 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.).


TIPS & TRICKS

 1. Use images that are the same size.
 2. Export your images to web quality to improve download time.
 3. Align your images so that major elements are in alignment.


EXAMPLES

BERLIN — 1945 AND TODAY

FLOYD MAYWEATHER PREPARES TO SEAL LEGACY

NEW HALF-DOLLAR

HOT MESS TO HAUTE COUTURE

MEMORIAL DAY FLOODS IN TEXAS

GUESS NBA STARS AND NICKNAMES


CREATE A JUXTAPOSE

Interactive
(best for web pages) GIF
(best for social media)

IMAGES

For GIF Juxtapose, you can upload images from your computer or from Dropbox, or
provide direct URLs to images. Make sure your images are the same size, or at
least the same aspect ratio.

For interactive Juxtapose, you can load images from Dropbox, or provide direct
URLs to images. We don't support uploads for interactive Juxtapose.

LEFT IMAGE


DRAG AND DROP OR CLICK TO UPLOAD AN IMAGE

remove image
URL
URL
Label
Credit

RIGHT IMAGE


DRAG AND DROP OR CLICK TO UPLOAD AN IMAGE

remove image
URL
URL
Label
Credit

OPTIONS

Slider start position
%
Show Labels
Show Credits
Animate
Make Responsive
Vertical


PREVIEW


JuxtaposeJS
One or both of your photos is larger than your browser window. The preview below
has been resized to fit your screen, but your embedded Juxtapose will retain
your original image dimensions.
Generate GIF Download


Publish

SHARE LINK

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.

EMBED

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.


HELP

Need help? First, please be sure to look at our list of frequently asked
questions below.

If you don't find an answer there, try our support forums or use our tech
support web form. Please be clear with your question and, if appropriate,
include a link to a page which shows the issue with which you need help. We can
only answer support questions in English. We try to be prompt, but please
understand that we do not have a dedicated tech support staff.

Find a bug? If you are confident you have found a bug, please report it as a
GitHub issue. Be sure to include detailed instructions on how to reproduce the
bug. If you're not sure, please start with the tech support system.


FREQUENTLY ASKED QUESTIONS


 * DO I NEED TO KNOW CODE TO USE JUXTAPOSEJS?
   
   Absolutely not. JuxtaposeJS is friction-free. If you have the links to two
   images, you are ready to use JuxtaposeJS.


 * CAN I CUSTOMIZE WHAT JUXTAPOSEJS LOOKS LIKE?
   
   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.


 * DOES JUXTAPOSEJS WORK ON IPHONE, IPAD, AND OTHER IOS DEVICES?
   
   Yes, JuxtaposeJS works normally on iOS devices.


 * CAN I HELP BUILD NEW FEATURES FOR JUXTAPOSEJS?
   
   Absolutely. Fork the project and get involved. Send us feedback. Help us make
   JuxtaposeJS the tool you need and want it to be.


 * CAN I UPLOAD IMAGES TO JUXTAPOSE? CAN I USE [SOME SERVICE] TO HOST IMAGES?
   
   Juxtapose does not support uploading images. The URLs for the left and right
   image should be direct URLs to images, except if you are using Flickr to host
   images, in which case Juxtapose can transform the Flickr image page URL to
   the correct format. You can also use images stored on Dropbox.com by clicking
   on the button with the Dropbox logo.
   
   Services like Imgur and Photobucket generally prohibit 'hotlinking' to images
   they serve, which is what Juxtapose does, so those will not work, or will
   stop working after appearing to work.
   
   This page describes a method for using images stored on Google Drive, but
   this is not technically supported, and could stop working at any time.
   
   This page describes a method for using images stored on Box.com, but this,
   also, is not technically supported, and could stop working at any time.


STORYTELLING TOOLS

We build easy-to-use tools that can help you tell better stories.

TIMELINE JS

Easy-to-make, beautiful timelines.

STORYMAP JS

Maps that tell stories.

JUXTAPOSE JS

Easy-to-make frame comparisons.

SOUNDCITE JS

Seamless inline audio.

View More
 * 
 * 
 * 

The Northwestern University Knight Lab is a team of technologists and
journalists working at advancing news media innovation through exploration and
experimentation.


Knight Lab (847) 467-4971 1845 Sheridan Road Fisk #109 & #111
Evanston, IL 60208 Latitude: 42.056893
Longitude: -87.676735 Northwesten University Knight Lab | Advancing media
innovation through exploration and experimentation.
© Copyright 2024 Northwestern University