Stacks Image 6

Swell

An image popping light-box.

Swell

Swell will instantly light-box any image with a unique animation. It has a selection of built in thumbnail hover effects, and is intended to be used anywhere in your page.

Overview.

So you want to place an image somewhere in your page. You want the detail of the image to be seen by the visitor, but placing it in the page in all it's full size glory is just too overpowering for the rest of the page layout.

This is when you should turn to Swell. It allows you to drop in your large image, and just see a smaller thumbnail of the image in the page (you have total control over the thumbnail size). When the user clicks the thumbnail sized image, it pops into a light-box animated from it's size and position in your page to the full size version in centre screen.

Swell is clever too. Lets think about mobile. On small mobile screens the chances are that your thumbnail Swell image is going to be filling almost the full width of the screen, because of your responsive design. What's the point of light-boxing it in this situation? There's none really, as it can't get significantly larger on this screen size. So Swell has an option to completely turn it's self off below a certain screen size that you define.

Instant download.

Version : 1.0.3

Responsive : Yes

First released : 20/8/2016

Last Updated : 19/10/2016

Stacks V 3.0 or greater.

Live demo.

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

Try clicking any of the image in the demo below. There are three built in animation speeds, snappy (fast), silky (medium), and treacle (slow).

Stacks Image 113

Snappy demo.

Animation speed : Snappy (fast).
Hover effect : Zoom.

NOTE: The light-box is using the optional setting to disable it's self below the screen size we have defined in this setting as 600px. So on screens below this width the stack simply behaves as any other regular image stack. After all, what would be the point of light-boxing the image below this screen size, as it will fill the entire width of the screen at this size anyway.

Stacks Image 117

Silky demo.

Animation speed : Silky (medium).
Hover effect : Shake.

NOTE: The light-box is using the optional setting to disable it's self below the screen size we have defined in this setting as 600px. So on screens below this width the stack simply behaves as any other regular image stack. After all, what would be the point of light-boxing the image below this screen size, as it will fill the entire width of the screen at this size anyway.

You should be looking at the images here. Try clicking one of the images now, to see a larger version in the Swell light-box.

Stacks Image 129
Stacks Image 138
Stacks Image 160

Treacle demo.

Animation speed : Treacle (slow).
Hover effect : 3D Shadow..

NOTE: The light-box is using the optional setting to disable it's self below the screen size we have defined in this setting as 600px. So on screens below this width the stack simply behaves as any other regular image stack. After all, what would be the point of light-boxing the image below this screen size, as it will fill the entire width of the screen at this size anyway.

You choose the 3D shadow colour when using this hover effect.

Stacks Image 169

Built in thumbnail animation options.

There are 6 options built in for you to choose from. This is what happens when the user hovers over one of your image thumbnails, in order to encourage them to click it.

Stacks Image 668

Shake

Stacks Image 664

Zoom

Stacks Image 666

Shrink

Stacks Image 662

Round

Stacks Image 670

3D Shadow

Stacks Image 660

None

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
Animation speed

There are 3 built in animation speeds. They control the speed at which the thumbnail image goes from a thumbnail to the full size version in the light-box.

Snappy (Fast) = 300 milliseconds.
Silky (Medium) = 600 milliseconds.
Treacle (Slow) = 900 milliseconds.

Image

Quick Fact : There are 1000 milliseconds in 1 second.

Hover effect

There are six built in hover effects to choose from for the image thumbnails. All of the optional hover effects can be seen directly above in the demo (the small striped thumbnail images).

Align

If the image thumbnail size you choose is smaller than the container you place the Swell stack, then you may want to align the thumbnail left, right, or centre of the parent container you placed the stack inside.

Restrict the width of thumbnail image

If the image you dropped in if larger than the width of the container you placed the stack inside, you may want to constrain the size of the thumbnail image even further. Just set this as the maximum width the thumbnail image can ever be, and the stack will take care of sizing the thumbnail proportionately for you.

Max width

This option is only available if you choose to restrict the width of the thumbnail image in the option above. This will then be the size the thumbnail can ever be displayed.

Disable if screen size is below (X)

When selected, you are able to disable the thumbnail from being light-boxed below a screen size of your choosing. There is little point light-boxing an image on a small screen size, when the image will nearly alway be filling the width of the screen anyway.

Screen size

This option is only available if the disable option above is selected. This will then be the screen size, below which the stack will not light-box the image if it is clicked.

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

Swell needs no fancy user interface for ease of use. It could not be easier. Just treat it as a regular default image stack that ships with the Stacks plugin. Simply dragging and dropping an appropriate image into Swell's drop zone.

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

The image I see in the light-box is smaller than the image I added?

When you drop any image into any image drop zone within a stack, Stacks the plugin checks the size of your image, and applies some sensible max size defaults. It will default to a maximum width of 1200px. As said, this is a sensible size for an image, as really large images slow down your page load times. But if you only have a few images on your page, you can override this default max size.

These steps apply to any image you drop into a stacks page.

1: After dropping your image into the stack, double click the image. This will change the edit mode window into image editing mode. Now in the right hand column, instead of the stacks settings, you will see the settings that are related to the image you just clicked.

Stacks Image 493

2: In the Layout section of the images settings, Un-check the "Constrain Width" checkbox, and or the "Constrain Height" checkbox. That's it. Now no maximum size has been enforced on your image, and when you light-box the image with the swell stack, you will see your image at full size.

Image

Quick Fact : Adding huge images to your page will slow down your page load speed. We recommend restraint when adding very large images. Never use images larger than around 2500px. When using large images, always optimise them. We recommend JPEG Mini as a handy application for optimising (reducing the file size) of your images, thus improving your page load speed.

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