Stacks Image 6

Compare

Before and after image comparison.

Compare

Compare is a fully responsive, interactive, A / B image comparison stack.

Overview.

You can display pairs of images, of the before and after type, for example, before and after Photoshop retouching, or before and after a home remodelling project. Anything really. If you want to show differences between two images, this is a great interactive way to present that to your visitor.

The stack will accept images of any size or aspect ratio. The only prerequisite is that both images have been made equal size.

The stack is filly responsive, and works equally as well where ever you place it, at any screen size. It's nice and simple to use, with a well thought out user interface in Stacks edit mode, with just enough options to make the stack fit into your page design, offering the ability to colour the various elements of the presentation to your taste.

Instant download.

Version : 1.0.7

Responsive : Yes

First released : 9/4/2015

Last Updated : 19/10/2016

Stacks V 3.0 or greater.
Fit My Video Tag

Live demo.

You can see a live example of the stack in action below.

Drag the slider back and forth to reveal the before and after images you provided the stack. You can use any images you like, at any shape and size, to this fully responsive stack. The divider line, drag handle, and arrows, can all be optionally sized and coloured to taste.

Stacks settings.

In this section we have provided a comprehensive list of available settings, and a full description of what each of the settings does for the stack.

Stacks Image 243
Before and after image drop zones

Just drag and drop your appropriate images into each of these drop zones. The only prerequisite is that both of the images are of the same size.

Initial position

You can choose the position the divider between each image is displayed when the page first loads. The is a percentage value from the left of the stack.

Thickness

This sets the thickness of the divider line between the two images.

Colour

This sets the colour of the divider line between the two images.

Size

This sets the size of the drag handle that prompts the user to drag the slider left and right.

Background

This sets the background colour of the drag handle that prompts the user to drag the slider left and right.

Arrows

This set the colour of the arrows that appear on the drag handle that prompts the user to drag the slider left and right.

Stacks edit mode.

We pay great attention to how we approach the editing interface of every stack, to ensure intuitive ease of use.

Stacks Image 297

Simple to deploy, by simply adding a pair of images that you'd like to show the differences between. Interactive slider elements can be individually coloured to taste in the stacks settings (see below).

Stacks FAQ.

Important information that is pertinent to this stack. Please read, as there may well be something here that is essential to the deployment of this stack.

Browser support

This stack is supported in all modern browsers. Any exception to this rule will be listed below.

Safari

Chrome

Firefox

Explorer

Known compatibility issues

There are no known compatibility issues with this stack.

Stack installation

Download.

After purchase, you will be sent an email containing a download link for the stack.
Download the zip file from the link, and unzip it to reveal the stack inside.
You should now see the stack as a logo style icon.

Normal installation.

Double click the un-zipped stack file (the one that looks like a piece of lego).
This will launch Rapidweaver if it was not already running, to automatically install the stack.
Rapidweaver handles the install process from here. Guiding you through a couple of simple clicks to complete the installation.
Re-start Rapidweaver to ensure the installation is complete.
You will now see the new stack in the Stacks plugin library.

Installation where more than one version of Rapidweaver is installed.

Sometimes if there is more than one version of Rapidweaver installed on your system, the double click method launches the wrong version of Rapidweaver to install the stack. To ensure the it is installed into the version you want to install to, you can, instead of double clicking the stack, just drag and drop it onto the appropriate Rapidweaver app icon in your dock at the bottom of your screen.

This will launch Rapidweaver if it was not already running, to automatically install the stack.
Rapidweaver handles the install process from here. Guiding you through a couple of simple clicks to complete the installation.
Re-start Rapidweaver to ensure the installation is complete.
You will now see the new stack in the Stacks plugin library.

Secure checkout.

We trust PayPal as our secure checkout provider.

Don't have a PayPal account? No worries. PayPal allows you to pay with your credit card if you do not have an account set-up.

Instant download.

Stacks Image 589
Compare Stack

© 2018 Doobox Software. Building premium Software Mac & RapidWeaver™