MaxGalleria – QuickStart

With the core of MaxGalleria, you have the Image Tiles gallery ready for use. Below are the basic options available to both Video and Images in the Tile layout:

1. Gallery Skin: MaxGalleria comes packaged with a few standard skins. Currently there are, No Border, Picture Frame, Portal, Portal Dark, Standard, Standard Dark, Tightness and Tightness Dark. Each skin is different in some way, but if you can’t find one that suits your gallery, you can make your own (more on that later).
2. Thumbnail Columns: Depending on how many videos or images you have in your gallery you may want a different amount of columns. MaxGalleria defaults to five columns, but you can choose anywhere between 1 and 10. Whatever column selection you make, your gallery will stick to that and is responsive, so you’ll have the same number of columns on all devices (larger numbers will adjust automatically on mobile).
3. Thumbnail Shape: Three options here with Square, Landscape and Portrait. Landscape is especially nice for videos which tend to be in a 16:9 ratio already, converting well to the Landscape shape.
4. Thumbnail Captions Enabled: For each image you have the ability to add/edit captions. If you’d like those captions to appear when the gallery loads, you’d want to check the checkbox for this option.
5. Thumbnail Click Opens: End result of a user clicking the thumbnails in the gallery. Options are Lightbox Image, Image Page (Attachment Page), Image Link (the link you’ve set for that image) and Original Image (direct URL of image).
6. Thumbnail Click New Window: For all options other than Lightbox Image, this indicates where the link of the thumbnail will be opened, a new window or the same window. Unchecked it will open in the same window.
7. Thumbnail Custom Image Class: Adds a class to every image.
8. Thumbnail Custom Image Container Class: Adds a class to the image container.
9. Thumbnail Custom Rel Attribute: Changes the Rel Attribute of the image. The default allows clicking prev/next inside the lightbox to get between the images.
10. Lightbox Captions Enabled: Much like the captions above, this indicates whether or not, when the lightbox is open, if the captions will show.
11. Images Per Page: To have video or image tiles appear on more than one page, enter a number here to turn on pagination and to indicate the maximum number of images/videos that should appear on each page.
12. Lazy Load Enabled: Allows images to be loaded as needed as they come into view in the browser; it increases page load times especially for pages with large images or with a large number of images in a gallery.
13. Lazy Load Threshold: The number of pixels above the image when lazy loading should begin. The default setting is 0 or none.
14. Use dFactory Responsive Lightbox: When checked MaxGalleria uses a lightbox from the Responsive Lightbox by dFactory plugin. When this option is checked ‘Thumbnail Click Opens’ has to be set to ‘Original Image’ or ‘Image Link’

Magnific Popup Options (Only in the Pro version. These settings apply when Thumbnail Click Opens is set to Lightbox Image.)

1. Align Top Enabled: This will align the top of the image to the top of the page rather than center to image vertically.
2. Close on Background Click Enabled: Will close the lightbox when the user clicks on the lightbox background.
3. Close with Escape Key Enabled: Closes the lightbox popup when the escape key is pressed.
4. 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.
5. Hide Close Button: Removes the close button that appears on the top right of the lightbox popup.
6. Lightbox Captions Enabled: Will display the image’s caption below the image in the lightbox.
7. 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’.
8. Popup Custom Class: Adds a class to the popup that can be used for adding CSS styling to the popup.
9. Removal Delay: Specifies the amount of time, in milliseconds, before removing the popup.
10. 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.
11. Vertical Fit Enabled: Will shrink the size of the image proportionally according to the available height.
12. Zoom Enabled: Displays a zoom effect when opening and closing a lightbox image. This effect is not available for video tiles.
13. Zoom Easing: Specifies the CSS3 type of easing. Choices include ease-in-out, ease-in, ease-out, ease and linear.
14. Zoom Duration: Sets the amount of time for the zoom effect in milliseconds.
15. 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 – Only in the Pro version. These are only available when the Gallery Enabled option is checked.

1. Navigate By Image Click Enabled: When this option is checked clicking on an image will display the next image in the gallery.
2. Arrow Button Mark-up: This option allows you to specify the HTML and CSS selectors of the arrow buttons. The default is [button title=’%title%’ type=’button’ class=’mfp-arrow mfp-arrow-%dir%’]. 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’.
3. Left Button Title: Specifies the title attribute of the left button. The default is ‘Previous (Left arrow key)’
4. Right Button Title: Specifies the title attribute of the right button. The default is ‘Next (Right arrow key)’
5. 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 mark-up is “%curr% of %total%https://dimsemenov.com/plugins/ magnific-popup/documentation.html