Support Center

Creating Image Galleries

Last Updated: Jan 12, 2018 11:33AM EST

Whether creating a high profile business website, or maybe just a set of pages to show off photography skills, dazzling image galleries are a necessary component of almost any professional looking website.

Our innovative Image Gallery allows you to easily add and manage the images on your site in 6 different highly attractive visualizations, with an unprecedented level of customizability. Each visualization comes with a large set of navigation styles, overlaid navigation buttons, a lightbox-style large image viewer, reflection and polaroid image effects, fade and slide transition effects and much more.

The enhanced gallery visualizations are not supported in some of our older designs.



Slideshow with animated caption








Adding a Gallery
To add a new Image Gallery to your web page:

  1. Click on the Elements icon.
  2. Expand the Gallery drop-down and then drag the Gallery icon onto your web page.
    A horizontal line will appear to indicate the locations where an Image Gallery may be added.
  3. Drop the Gallery in the desired location on your web page.

Now that your gallery is added to your page, you can modify the display options or begin adding images.

Gallery Options
Depending on the gallery visualization you choose, different Options will become available. Some of them are common for all visualizations, other are available for particular visualizations only.
The basic option Image Size (or Thumbnails Size or Gallery Size, depending on the visualization) determines the size of the gallery allowing the users to set custom width and hеight values.

Appearance & Options
1. Show Caption option controls either the image captions (if any) to be displayed below the images or not.

2. Keep Original Image allows you to preserve the original version of the uploaded image. When this option is switched on the viewers will be able to zoom in the photos to their original sizes in the Large Image Viewer. Otherwise when zooming the viewers will see the photos in reduced sizes. However, preserving original images will result in significant space usage (sometimes ten times more) on your website account.

3. When Crop Image is checked, the uploaded image will be cropped to the aspect ratio of the gallery image size before being resized. When this option is not checked, the uploaded image will preserve its original aspect ratio in the gallery. The following example shows the differences between Crop Image On and Off:


Gallery Controls
In some gallery visualizations you can choose between different Navigation Types - Buttons, Buttons and Numbers,Dots and Numbers. Also the Overlaid Prev / Next option adds additional previous and next buttons over the displayed image (not applicable for the Thumbnails visualization).

Effects & Transitions
You can apply an effect over all images in your gallery via the options in the Effect dropdown. The currently available effects are Reflection and Polaroid. You can remove any effect selecting the None option.

The Transition option allows you to set animated transition effect between gallery images (or pages in the Thumbnails visualization). The available effects are Fade and Slide. Select None if you don't want to have any effect. This option is not available in the Slider visualization.

The options in the Slideshow section controls the way the images in the gallery slides. They are available in all visualizations besides Thumbnails.

The Timeout option allows you to set the interval between two slides (in seconds). If you switch on the Autoplay option the slideshow will start automatically after the gallery has been loaded. When the Show Play / Pause option is turned on an additional navigation button will be displayed in the bottom left corner of the image allowing your visitors to control (start and stop) the slideshow animation. It will be a Play button when the slideshow is stopped and a Pause button while the slideshow is running. And the Loop option determines if the slideshow will continue or will stop once the last image in the gallery has been loaded.

Large Image Viewer
You can allow your visitors to see larger version of a gallery image when they click on it. This larger image is loaded in the Large Image Viewer, available in all gallery visualizations.  


Appearance & Options
1. Show Caption option controls either the image captions (if any) to be displayed below the images in the Large Image Viewer or not.

2. When the Dim Lights option is selected, a partially transparent black background will be displayed behind the Viewer.

3. The Zoom option allows the visitors to zoom-in and zoom-out on the image in the viewer by clicking on it. Users are able to pan around the larger image version via click and drag. The size of the zoomed-in version of the image depends on the Keep Original Image option (see above).

4. The Size dropdown allows you to configure the size of the Large Image Viewer. It could either take the whole browser window size (if you select the Window Size option) or could load in a precisely set size (if you select Fixed Size option and assign Width and Height values).

5. The Viewer Controls and Slideshow options work the same way as the options in the visualization's Gallery Controls and Slideshow sections but applied over the Viewer.

Shortcut Keys
The visitors can navigate through the images in the Viewer using different shortcut keys:

  • Space or Right Arrow - move to next image
  • Backspace or Left Arrow - move to previous image
  • Esc - close the Viewer

Once you add the Image Gallery the dialog for adding gallery images will pop up.

*Some gallery visualizations may not be supported in some designs.

Liquid error: undefined method `gsub' for nil:NilClass
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
Invalid characters found