Before/After Images: Publish repeat photos on website
Variant 1: Photos on top of each other / side by side
The two photos are displayed on top of each other or side by side on the website.
Advantages:
- Simple implementation
- Requirements for the accuracy of fit of the two photos are less than when using a slider (variants 2 and 3).
Disadvantages:
- Interactivity is missing.
- Direct comparison of the two photos is more difficult than using a slider (variants 2 and 3).
Repeat photos with slider.
On the Juxtapose.js website, two photos can be selected in an input mask and the information Label and Credit can be entered for each photo. After a click on Preview/Publish are generated:
- A Share Link for calling the comparison in a new browser window.
- Code for embedding the comparison in an HTML page. When this code is inserted into an HTML page, the before/after photo comparison is displayed within the page.
Advantages:
- Relatively easy to implement.
Disadvantages:
- The comparison photos are stored on external web server.
- It is unclear whether the use of Juxtapose.js has implications for image rights.
- Requirements for the accuracy of fit of the two photos are higher than for variant 1.
Variant 3: jQuery Before/After Plugin
With this plugin, the before/after photo comparisons can be published 100% (i.e. without a link to another web server as with variant 2) on a web server.
Advantages:
- All data and photos are stored on a web server.
- Realization of multiple comparisons is possible without any problems.
Disadvantages:
- Implementation somewhat more complex than with the other variants.
- Requirements for the accuracy of fit of the two photos are higher than for variant 1.