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.

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
Boscastle Boscastle
Normal Foggy
Original image Fogged image


Setup

ImageCompare is simple to use and intended for all users of RapidWeaver. Follow these instructions to get started:

  1. Once installed, drag and drop an ImageCompare stack into your page
  2. 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
  3. Adjust any of the other settings, like the styling or labels. Labels and the overlay can be turned off if not required
  4. 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.
 

Contribute

If you find this stack element useful in your personal or commercial web projects; please consider making a small contribution towards ongoing support and updates. There are many different ways you can contribute to the Stacks4Stacks project, and benefits for doing so.
Bookmark or share this page
Baidu 百度
Blogger
Delicious
Digg
Facebook
Google+
LinkedIn
LiveJournal
MySpace
Одноклассники
Reddit
Renren 人人网
StumbleUpon
Tumblr
Twitter
ВКонтакте
Weibo 微博
XING
Contact Us
Email This Page
Print This Page
PS: This bookmarking and sharing popup is powered using our brilliant SocialPopup stack!

Cookies

Like a lot of websites, Stacks4Stacks uses cookies to help enhance your browsing experience and handle things like purchases. We take your privacy seriously, and welcome you to freely opt-out of nonessential cookies at any time by reviewing your preferences on this page.