Beginners Guide

This tutorial takes you through the very basics of setting up Galleria. If you’re an experienced developer check out the quick start tutorial instead. Both the free and premium themes include a demo.html which you can use as reference.

If you don’t see any text after reloading the page, the path to the Galleria file is probably wrong.

If it does work, you can remove the <script> tag inside the body and move along.

Setting dimensions

We need to set some dimensions for the gallery. This can be done in many ways, but the simplest is to add some basic CSS rules.
Add the following markup inside the <head> tag to apply dimensions and a default black background:

<style>.galleria{width:700px;height:400px;background:#000}</style>

Galleria will then extract these measures and apply to the gallery.

Adding images

Now we need to add a few images for Galleria to display. There are several ways of doing so,
but the simplest one is probably to just add images as HTML.