Skip to content

Overview

Video tutorial

This video can explain how XO Gallery app works

Global settings

To access global settings, click Settings from navigation. Here you can:

  • General settings:
    • Prevent hover effect when title is blank
    • Enable image alt tag
    • Enable lazyload for mobile
    • Use filename (without extension) as image title
  • Add custom effects (that appear in effect list when build gallery)
  • Manage button styles: Button is used for loadmore, view product, hover layer, back to album...
  • Add custom CSS code for all gallery

You can export gallery by clicking ... button, then choose Export gallery

  • From gallery list page, click Add new Gallery
  • Name your gallery
  • Upload images
  • Press Save

You can access gallery settings by clicking Settings when edit gallery.

  • Masonry placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall
  • Grid a regular set of equal rows and columns grid of images that displays every image as a square

    You don't have to calculate and crop image in some fixed with & height. XO Gallery do it for you.

  • Justified style like Flickr images

  • Carousel Put image in carousel type

Hover effect

Set global effect for all images in gallery. You can set different effect for single image in image settings popup.

Note

If you use Hoverdir effect, you can't set different effect for single image in gallery.

Appear effect

This will hide all gallery images, then show images when user scroll.

Enable popup

Here you can:

  • Choose effect for popup
  • Change background opacity
  • Show/hide caption
  • Limit display item (with config text)

Warning

  • You have to disable popup if you want to use link feature.
  • Loadmore & filter will be disabled if you enable limit feature.

Loadmore

This feature is useful when you have many images in your gallery and you don't want user to wait on first load.

Filter

Add filter for images in gallery.

Note

Filter is available for Grid & Masonry types.

Image order

Change order of images in gallery:

  • Normal: follow upload order
  • Reverse: reverse upload order
  • Random: Image will display random everytime user visit gallery page.

Thumbnail size

Images in gallery will be resized for fast loading. Here you can manual set thumbnail width for your images. Popup will use original image that you upload.

Option to crop image in particular size.

Note

Image will be cropped from center. Image crop can't be upscale.

Here you can modify how images are displayed.

  • Choose type
    • Simple title
    • Title & description
    • Title & button
    • Button
    • Disable (no hover layer)
    • Custom HTML
  • Custom for item
  • Custom for hover layer

Responsive

Image order panel

Image settings

Click icon then you can change settings for image:

  • Content:
    • Add title/description... (depend on what you choose in design tab)
    • Enable video (show in popup): support Youtube & Vimeo video. Just paste video URL here.
  • Settings:
    • Filter (if you enable filter in settings)
    • Link
    • Alt text
    • Image width (depend on gallery type): compare with column
    • Image height (depend on gallery type): compare with column
    • Hover effect: here you can choose different hover effect for each image
    • Appear effec: here you can choose different appear effect for each image
    • Setting show/hide on different devices
  • Hotspot: (pro plan only)
    • Tags product
    • Add custom link
    • Show hotspot with/without number