CollagePlus Stackcreate a responsive grid for images, even if they have different proportions
With this stack, you can build responsive galleries for images (local and/or warehoused), even if they do not all have the same proportions. The CollagePlus stack works great on its own (e.g. for a portfolio), but also works together seamlessly with the LightboxPlus stacks to create awesome image galleries.
You set the preferred height of the images, and the CollagePlus stack calculates the best width for each of them, so the gallery will be left and right aligned. The result is a slick gallery, optionally with captions.
DemoVisit the demo site to see the stack in action.
Set the use of this stack (on its own, with a LightboxPlus stack).
Choose the right option for the image proportions (all the same, different).
To add items to this stack, click the plus button at the bottom (choose between local image and warehoused image). You can’t drag stacks into this stack!
With a local image:
Drag an image into each CollagePlus Item.
To use a link on a thumbnail, set the link on the image.
With a warehoused image (fig. 3):
Set the image url and alt tag.
When using the CollagePlus stack with a LightboxPlus stack, make sure the option set link to image is disabled..
The alt tag of each image will be used as the caption.
Whenever possible, use the styling options provided by this stack.
Need help using it on a non-stacks page? Here’s a tutorial.
The size of each image is calculated by the stack, so it will rarely be exactly the target height you set and images may be cropped to some extend to make them fit.
When using the CollagePlus Stack in combination with a LightboxPlus stack, the caption is not part of the link.
When using the CollagePlus Stack in combination with a LightboxPlus stack, all images in the are loaded. With galleries with many images, this may result in slow loading of the page, so don’t overdo it.
The image effects (opacity, blur,…) also apply to the image borders.
In Internet Explorer 9 and worse, the effects on hover don’t work (except opacity).
In Internet Explorer 10 and worse, effects when loading the images don’t work (except fade).