MaxGalleria Masonry – QuickStart

QUICKSTART GUIDE

Getting Started

The Masonry addon is now included with MaxGalleria Pro and no additional installations are necessary. NB: Support for our individual addons will no longer be available from the 1st May 2022.

~~Activating~~ the Masonry add-on will allow you to use the Masonry template in your image galleries.

The best way to use this template is with two set images. One set of images should be sized for the grid which will usually have the same width but can vary in height. These are the images that you add to the gallery. The second set of images are the full size images which you can link to the grid image to so that they are displayed in a lightbox when the masonry grid image is clicked. If no full size image is provided and the lightbox option is checked, then the grid image will be displayed in the lightbox.

Options

Image Captions Enabled: Shows the image caption under the image in the masonry grid. The Title, Caption, Link and Alt Text for an image can be entered under the gallery’s image tab; place the mouse over the image and click the Edit link that will appears under the image.
Image Click Enabled: Makes the image clickable. Choose what clicking an image will do with the Image Click Opens option.
Image Click Opens: Choose the behavior of clicking on an image: go to the image’s page, go to the image’s link, show the original image or display the image’s link in the lightbox. In the cases when no link is supplied when ‘Open link in Lightbox” is selected, the light box will display the current image.
Image Click New Window: Displays the result of clicking on a image open a new window/tab.
Image Custom Rel Attribute: Changes the Rel Attribute of the image. The default allows clicking prev/next inside the lightbox to get between the images.
Image Alignment: Allows images to be aligned to the Left, Center or Right.
Disable Resize When Browser Width Changes: By default the grid will resize itself when the width of the browser changes. Checking this option will disable resizing and the grid will remain at its full width.
Resize Delay: The amount of time, in milliseconds, before the grid resizes itself after the browser width is changed when Disable Resize When Browser Width Changes is not checked.
Start Direction: Indicates the direction that images will appear in the grid: Left or Right.
Ignore Inactive Items: When checked, inactive items will still be visible.
Item width: This is the most important setting for getting your grid to appear correctly. This is the width of one grid item in pixels, such as 200, or percentage, such as 10%. When no amount is set this defaults to width of first item. If your images are large and no item width is set then the images will appear in a single column. Setting the item width to a number smaller than the full width, like 200, will make the images appear in a masonry grid pattern.
Fill Empty Space: Adds boxes to empty spaces at the bottom of the grid.
Flexible Width: When checked this option adjusts item width to create optimal layout based on browser size.
Offset (Vertical and horizontal space between images in pixels): Sets the margins between images, both the right (or left depending on the direction ) and bottom margins.
Outer Offset: The amount of pixels between images and the parent container.
Vertical Offset: Increases the vertical distance or margins between images in addition to the amount set in the Offset option.

Lightbox Settings

These settings apply when Image Click Opens is set to Open link in Lightbox.

Align Top Enabled: This will align the top of the image to the top of the page rather than center to image vertically.
Close on Background Click Enabled: Will close the lightbox when the user clicks on the lightbox background.
Close with Escape Key Enabled: Closes the lightbox popup when the escape key is pressed.
Fixed Content Position: The ‘Auto’ selection will set the lightbox’s popup position to be fixed (it can not be scrolled up or down) if the browser supports that property. Selecting ‘On’ will set the popup position to be fixed even if the browser does not support it. Selecting ‘Off’ will allow the lightbox’s popup to be scrolled up or down.
Hide Close Button: Removes the close button that appears on the top right of the lightbox popup.
Lightbox Captions Enabled: Will display the image’s caption below the image in the lightbox.
Overflow Y: When Fixed Content Position is set to ‘Auto’ or ‘On’ this option will display a vertical scroll bar when it is set to ‘Auto’ or ‘Scroll’.
Popup Custom Class: Adds a class to the popup that can be used for adding CSS styling to the popup.
Removal Delay: Specifies the amount of time, in milliseconds, before removing the popup.
Retina Images Enabled: This option allows for the display of high resolution images in place of normal resolution images on high-dpi screens with different a devicePixelRatio. To accomplish this first add normal resolution images to a gallery. Then upload matching high resolution images directly to the WordPress media library. The high resolution images should have file names ending in ‘@2x’; example: image.jpg & image@2x.jpg. The image should have the same URL path as their matching normal resolution images.
Vertical Fit Enabled: Will shrink the size of the image proportionally according to the available height.
Zoom Enabled: Displays a zoom effect when opening and closing a lightbox image.
Zoom Easing: Specifies the CSS3 type of easing. Choices include ease-in-out, ease-in, ease-out, ease and linear.
Zoom Duration: Sets the amount of time for the zoom effect in milliseconds.
Gallery Enabled: When the gallery option of the lightbox is enabled the user can move between the different images or videos in the current gallery by using previous and next arrow buttons that are displayed in the light box.

Gallery Options

These are only available when the Gallery Enabled option is checked.

Navigate By Image Click Enabled: When this option is checked clicking on an image will display the next image in the gallery.
Arrow Button Mark-up: This option allows you to specify the HTML and CSS selectors of the arrow buttons. The default is ““. Note that this field does not accept double quote marks. ‘%title%’ will be replaced by the image’s caption if there is one and ‘%dir%’ will be replaced by arrow direction, either ‘left’ or ‘right’.
Left Button Title: Specifies the title attribute of the left button. The default is ‘Previous (Left arrow key)’
Right Button Title: Specifies the title attribute of the right button. The default is ‘Next (Right arrow key)’
Counter Mark-up: Specifies the HTML and CSS selectors of the counter text on the bottom, right side of the popup. Note that this field does not accept double quote marks. The default markup is “%curr% of %total%“. ‘%curr%’ will be replaced by the number of the current image (on the page) and ‘%total%’ will be replaced by the total number of images in the gallery on the current page.

For more information about the masonry grid settings, see http://www.wookmark.com/jquery-plugin and https://github.com/GBKS/Wookmark-jQuery.

For more information about the lightbox settings, see the Magnific Popup documentation http://dimsemenov.com/plugins/magnific-popup/documentation.html