User Tools

Site Tools


Galleria Slideshow

The Galleria slideshow is touch-friendly, all-purpose slideshow for desktop and mobile browsers. It offers performance optimized loading of images, full-screen viewing support, and numerous customization options.

To enable the Galleria slideshow, access the Appearance control pane. Under Staging, set Grid-type :desktop as “Galleria Slideshow”, as below.


Aspect Ratio (Width/Height)

Determines the size and shape of the slideshow.

If set to “auto”, the slideshow will occupy the full width of its container; the provided values will operate as aspect ratio. You may set any aspect ratio, such as 16:9, 3:2, 2:1, etc. Larger numbers also work, such as 600 / 400 being equivalent to a 6:4 aspect ratio.

If set to “fixed”, the numbers act as maximum size for the slideshow. For example, setting 600 / 400 would give you a slideshow 600-pixels wide by 400-pixels tall. On smaller displays, the slideshow will scale down, maintaining the 6:4 aspect ratio.

Autoplay / Interval
Automatically starts and advances the slideshow. The slider value is in milliseconds (1000ms = 1 second) and is the length of time the slideshow will hold an image before moving on to the next. To disable autoplay, set this value to zero (0).

Transition Speed
Defines the speed of the transition between images.

The slideshow will being playing on page load.

Clicking the slideshow stage will advance the slideshow forward.

Toggles the image pan effect.

Prevents Galleria from upscaling images beyond 100% scale.

Toggles if Galleria should stop playing if the user navigates.

Shows the image count – ex. 1/10 – in the info overlay. Requires that showInfo also be enabled.

Toggles the Full-screen button for the slideshow.

Toggles Next/Previous navigation arrows.

Toggles the info overlay (image titles, captions and counter).

Toggles the Play and Pause buttons for the slideshow.

Toggles display of thumbnails.

Sets how Galleria should crop when in fullscreen mode.

Defines how Galleria will crop the image.

Sets a different transition on the the first image.

Defines a different transition when a touch device is detected.

Defines what transition to use.


The Galleria slideshow does not support the use of quotation marks or line-breaks in captions. The occurrence of either quotation marks or line-breaks will cause the slideshow to fail completely; it will not render on the page at all.

You may include quotation marks in your captions if you escape them. This is performed by fronting all occurrences of quotation marks with a backslash. For example, to use this text as a caption:

Kompong Phluk, "harbor of the tusks" in Cambodia.

… we must escape the quotation marks in this way:

Kompong Phluk, \"harbor of the tusks\" in Cambodia.

Using with CE4 Publisher

There are no special considerations when using the full-screen presentation with CE4 Publisher. Export and upload to the /ttg-be/templates/gallery folder, as with any other gallery template.

staging_galleria.txt · Last modified: 2014/07/25 14:53 by matthew

The Turning Gate
Creating webbly, wobbly, Lightroomy things since 2007.