Other effects like ImageCompare have already been built and released for RapidWeaver in the past. However this one approaches things from a slightly different perspective. The first thing to mention is that ImageCompare is fully responsive; ensuring that it will safely and elegantly scale-down to fit on smaller web browsers (without breakage). The drag handle separating the two images is compatible with most touch-input devices; including various Android, iOS and Blackberry devices. Finally the ImageCompare stack will print or save as PDF very well, with the two images displayed side-by-side and their corresponding labels displayed above.
The ImageCompare stack is able to source a pair of images from an online location (like an image warehouse) or it can accept images dragged and dropped directly into the page. The choice is yours. If sourcing images from an external location, you just use a regular HTML image tag.
ImageCompare is compatible with all ThemeFlood RapidWeaver themes. It also works with the Freestacks Responsive theme (for which it was originally requested for, by a user). This stack is free to download and you can have it setup within a few minutes. ImageCompare uses the excellent open source TwentyTwenty jQuery plugin. TwentyTwenty is MIT licensed, so you can use it in both personal and commercial projects, with few restrictions.
In the stack settings for ImageCompare, you can easily customise several aspects. You can adjust most aspects of the 'next / previous' labels, change the start point of the drag-handle and customise the opacity of the overlay. Both the labels and overlay can be turned off if they're not required. So this is a pretty feature-packed stack and integrates well into a wide variety of projects. You can safely use multiple ImageCompare stacks on the same page. ImageCompare stacks can be @imported into other page types using PlusKit.
The ImageCompare stack is able to source a pair of images from an online location (like an image warehouse) or it can accept images dragged and dropped directly into the page. The choice is yours. If sourcing images from an external location, you just use a regular HTML image tag.
ImageCompare is compatible with all ThemeFlood RapidWeaver themes. It also works with the Freestacks Responsive theme (for which it was originally requested for, by a user). This stack is free to download and you can have it setup within a few minutes. ImageCompare uses the excellent open source TwentyTwenty jQuery plugin. TwentyTwenty is MIT licensed, so you can use it in both personal and commercial projects, with few restrictions.
In the stack settings for ImageCompare, you can easily customise several aspects. You can adjust most aspects of the 'next / previous' labels, change the start point of the drag-handle and customise the opacity of the overlay. Both the labels and overlay can be turned off if they're not required. So this is a pretty feature-packed stack and integrates well into a wide variety of projects. You can safely use multiple ImageCompare stacks on the same page. ImageCompare stacks can be @imported into other page types using PlusKit.
Example
Two examples of ImageCompare stacks are shown below; nested inside UsefulStack containers (to maintain a maximum width of 1000px). The first example alternates between a colour and monochrome image. The second example alternates between an original and a modified 'fogged' image.
Before
After
Normal
Foggy
Setup
ImageCompare is simple to use and intended for all users of RapidWeaver. Follow these instructions to get started:- Once installed, drag and drop an ImageCompare stack into your page
- In the stack settings, choose between sourcing a pair or images either locally (dragged and dropped into the placeholders shown) or warehoused images from another location online
- Adjust any of the other settings, like the styling or labels. Labels and the overlay can be turned off if not required
- Preview your page and try the slider
For best results, use a pair of images which are of an identical size and shape. We recommend JPG images saved at 72 dpi and under 200KB in size. Don't forget to put your images through ImageOptim, before adding them to the page or uploading them to your web server.
