In this recipe, we'll learn how to get more out of Galleria by knowing how to turn the knobs that will customize the gallery in different ways.
In this example, please utilize the code we wrote in the first How to do it... section, or work with the themes/classic/classic-demo.html file. Both will allow us to manipulate configuration options.
To configure Galleria, we'll use the Galleria.configure method. This method accepts a JavaScript object of keys and values.
Galleria.configure({
autoplay: true
});In this example, we're invoking Galleria to automatically start the gallery when the page is loaded with the autoplay option.
The JavaScript object passed into the Galleria.configure method overrides or extends the default Galleria configuration. This configuration is then passed on to the theme loaded and plugins that are installed.
We can also combine the Galleria.run method call with configuration options. Using the example we've been working with, the Galleria.run method call would look as follows:
Galleria.run('#galleria', {autoplay: true});Here, we'll cover the most useful Galleria configuration options.
autoplay: This option automatically starts the gallery on page load. Its default value is set to false.carousel: This option controls whether a carousel is created. Its default value is set to true.carouselSpeed: This option controls the animation speed of changes in the carousel in milliseconds. Its default value is set to 200.height: This option manually sets the gallery height. This is useful if no height is set in CSS. Its default value is set to 0.width: This option manually sets the gallery width. This is useful if no width is set in CSS and constraining the gallery width is required. Its default value is set to 0.transition: This option customizes the transition used for changing images. It defaults to "fade" for most themes but is "slide" for the classic theme.transitionSpeed: This option customizes the duration of the transition. Its default value is set to 400 milliseconds.preload: This option provides the number of images to preload in the gallery. It defaults to 2.responsive: This option tells Galleria to resize when the window size changes. This will only work along with media queries that define how the gallery should look with different window sizes. Its default value is set to false.show: This option customizes which image should be displayed first. It defaults to 0 (first image).showInfo: This option shows the caption information. It defaults to true.thumbnails: This option customizes how the thumbnails are generated. The following are the possible values for this option:true: This value shows thumbnail imagesfalse: This value does not show the thumbnail browser"empty": This value places empty span tags with the class of "img""numbers": This value places empty span tags with numbers instead of images
All of these options are also defined in the Galleria source code and on Galleria's website documentation.
Visit http://galleria.io/docs/options/ for a complete listing of Galleria options.