Swell Stack
Image light-boxing where and when you need it
Description
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.
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.
Demo
Live demos of the stack in action.
Snappy demo.
Animation speed : Snappy (fast).
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.
Silky demo.
Animation speed : Silky (medium).
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.
User Settings
A comprehensive overview of this stacks user settings.
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.
1000 milliseconds = 1 second.
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).
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.
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.
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.
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.
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.
Last modified %(last_mod)%