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. If the enhanced Image Gallery options are not available for your site template, please review the Image Gallery - version 1.0 tutorial.
Click on a Gallery Visualization to find out more.
Add a Gallery Visualization
To add a new Image Gallery to your web page, reach for the Top Admin Menu and select Add Content > Image Gallery - green rectangles will appear to indicate the locations where an Image Gallery may be added. Click on the desired location and the Add Gallery dialog will appear where you will choose from the available visualizations (you can change the gallery visualization at any time).
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. For more information about the visualizations and their specific options read the Gallery Visualizations Details tutorial.
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
Show Caption option controls either the image captions (if any) to be displayed below the images or not.
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.
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:
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 (visit Gallery Image tutorial to see how). This larger image is loaded in the Large Image Viewer, available in all gallery visualizations.
Appearance & Options
Show Caption option controls either the image captions (if any) to be displayed below the images in the Large Image Viewer or not.
When the Dim Lights option is selected, a partially transparent black background will be displayed behind the Viewer.
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).
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).
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.
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.
Read next: Gallery Visualizations Details tutorial >>
Read next: Gallery Image tutorial >>
*Some gallery visualizations may not be supported in some designs.