User Tools

Site Tools


staging_galleria

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.

Options

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.

autoplay
The slideshow will being playing on page load.

clicknext
Clicking the slideshow stage will advance the slideshow forward.

imagePan
Toggles the image pan effect.

maxScaleRatio
Prevents Galleria from upscaling images beyond 100% scale.

pauseOnInteraction
Toggles if Galleria should stop playing if the user navigates.

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

showFullscreen
Toggles the Full-screen button for the slideshow.

showImageNav
Toggles Next/Previous navigation arrows.

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

showPlay/Pause
Toggles the Play and Pause buttons for the slideshow.

thumbnails
Toggles display of thumbnails.

fullscreenCrop
Sets how Galleria should crop when in fullscreen mode.

imageCrop
Defines how Galleria will crop the image.

initialTransition
Sets a different transition on the the first image.

touchTransition
Defines a different transition when a touch device is detected.

transition
Defines what transition to use.


Captions

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.