Before/After Comparison

This application note describes how to create a Blocks design for comparing two images or other content by dragging a partition to gradually reveal one or the other. The comparison visualized by this method could, for instance, be a map of a city today and at some earlier point in time, possibly including several old maps that can be selected.

Take a look at this video to see an example of what you can do with this method, and to learn more about how it's done.

Installation

To try out this on your own, start with the general setup guide to recreate this application. Use this root directory, containing all you need for this demo. Then do as follows:

  1. Start Blocks.
  2. Open the editor using the Admin button.
  3. Log in using the name admin and the password pixi.
  4. Open a second browser window to act as a test spot, and go to http://localhost:8080/spot/.
  5. Double-click the single Display Spot and reassign it to the ID shown in the test spot window opened in the previous step.

:!: If step 4 above fails, your server may use another port number than 8080. The correct port number is shown in the URL bar of the editor window.

You should now be able to see and try out the before/after comparison in your spot window.