Before & After Image Slider (Juxtapose)

Allow the user to compare before-and-after photos using the interactive slider Juxtapose:

  1. Get the “before” image of a property from Google Maps Streetview
    • Type in an address and click on the Streetview image
  2. Take a screenshot:
    1. On a Mac, ? + Shift + 4.
    2. Use the crosshairs to draw your image
    3. Get the resulting PNG from your desktop
    4. Crop it and save as a JPG
  3. Get a second image from the exact same location and perspective. Take your own photo or get an earlier/later one from Streetview.
  4. Create a slider using Juxtapose
  5. Publish it to get the embed code and place it in WordPress
  6. Ensure width = 100% for mobile

 

More

Follow us on social media

The Signal is produced by senior students at the University of King’s College School of Journalism, Writing & Publishing.