Masonry Image Gallery

Flexible masonry-style, linkable image gallery.

Add as many images as needed with the following editable fields:

Image [Image] : Add an image and edit its alt text and intrinsic width and height. Can also include a link.
Layout [Group] : A group of fields for determining the layout of the image.
- Column Span [Number] : Sets the number of columns the image should span across (should not exceed the numbers of columns set for the entire gallery).
- Row Span [Number] : Sets the number of rows the image should span across. Spanning images across multiple rows will reorder the images to leave the least amount of white space.
Load in Animation [Group] : A group of fields for setting the animation of the image when it loads into the page (animation does not activate until the gallery is in view on the screen).
- Animation [Choice] : The type of animation to show. Choices include None, Fade In, Fade In Up, Fade in Right, Fade in Down, and Fade In Left.
- Animation Delay [Number] : The time, in milliseconds, to delay the animation on the image from activating once the gallery is in view.

Fields affecting the styling of the corners on images.

Global Radius [Number] : Set the radius of all corners to the same number of pixels.
Custom Radius [Boolean] : Choose to set a different radius for each corner.
Top Left [Number] : Visible only if Custom Radius is checked. Set the radius, in pixels, of the top left corner of images.
Top Right [Number] : Visible only if Custom Radius is checked. Set the radius, in pixels, of the top right corner of images.
Bottom Left [Number] : Visible only if Custom Radius is checked. Set the radius, in pixels, of the bottom left corner of images.
Bottom Right [Number] : Visible only if Custom Radius is checked. Set the radius, in pixels, of the bottom right corner of images.

Fields affecting white space within the gallery.

Spacing between images [Number] : The space, in pixels, where two images are next to each other.

Fields affecting animations within the gallery.

Image Link Hover [Choice] : Choose an animation for when a user hovers over a linked image. Choices include Zoom In, Zoom Out, Color to Grayscale, and Grayscale to Color.