First, let's create the skeleton for our basic galleria theme in the galleria.basic.js file:

(function($) {
Galleria.addTheme({
    name: 'basic',
    author: 'Galleria How-to',
    css: 'galleria.basic.css',
    defaults: { transition: 'slide' },
    init: function(options) {
    }
});
}(jQuery));

The addTheme function registers the theme with the provided settings to Galleria. The .css file specified with the css option is automatically loaded here also. The init anonymous function is empty right now but this is where we would put the custom JavaScript functionality.

Next, we'll go on to styling our gallery. At its basic level, this involves placing tags into the DOM so that they can be positioned on the page.

The major components of the gallery that need to be styled are:

Now, let's go through the contents of the CSS file that provides very basic styles for our gallery.

#galleria{ height: 550px; }

The preceding code sets the height of the gallery. This is required by the gallery to load and scale all the elements for the gallery correctly.

#galleria-loader{height:1px!important}

The preceding code provides the definition of the gallery loader container that is required for Galleria to load properly.

.galleria-stage { position: absolute; top: 0;bottom: 60px; left: 10px; right: 10px;width: 500px; float: right; max-height: 550px;}

.galleria-stage is the container for the images, loader, counter, and gallery navigation buttons.

.galleria-thumbnails-container { top: 0;position: absolute; left: 10px; right: 10px;z-index: 2; width: 500px; }

.galleria-thumbnails-container is the container for the thumbnail carousel. Here, we're placing it on top of the gallery.

.galleria-thumbnails .galleria-image { height: 40px;
    width: 60px; margin: 0 5px 0 0;border: 1px solid #000;
    float: left; cursor: pointer; }

With this rule we're styling the images in the thumbnail carousel. We make sure to float left here so that the images are displayed one after another.

.galleria-info{ position: absolute; top: 48px; opacity: 0.7;
  background-color: #F1F1F1; z-index: 4; left: 10px;
  width: 500px; }

With this rule, we target the tag that places the title and description of the images as they're browsed. In this theme, we're placing it just below the thumbnail carousel.

.galleria-counter { position: absolute; bottom: 30px;
  left: 10px; }

.galleria-counter is used to display which image the user is currently viewing out of the total number of images in the gallery.

.galleria-image-nav { position: absolute; top: 50%;
   margin-top: -62px; width: 500px; height: 62px;left: 0; }

.galleria-image-nav places the navigation buttons on the gallery so that we can manually move forward and backward in the gallery. In this case, we're just trying to place the buttons in the middle of the gallery.

.galleria-image-nav-left,
.galleria-image-nav-right { opacity: .5; cursor: pointer; 
   width: 35px; height: 124px; position: absolute;
   left: 0; z-index: 2; background-color: gray; }
.galleria-image-nav-right { left: auto; right: 0;
   z-index: 2;}
.galleria-image-nav-left:hover,
.galleria-image-nav-right:hover { opacity: .9; }

This preceding set of rules places right and left navigation buttons on the edges of the gallery.

Finally, we need to modify the inline JavaScript code in our galleria.basic-example.html file to call our new theme, using the following code:

  <script src="http://code.jquery.com/jquery.min.js"></script>
  <script src="../../../galleria-1.2.8.min.js"></script>
  <script>
 $(document).ready(function(){
   Galleria.loadTheme('galleria.basic.js');
      Galleria.run('#galleria');
 });
  </script>

Additionally, you'll need to change the image references in the galleria-basic-example.html file to work with the images where they are stored. If following along with the provided code and examples, the images should be placed two folders above the theme file:

<a href="../../images/image1-1600px.jpg">
  <img title="Image 1"
       alt="Image 1 description"
       src="../../images/image1-200px.jpg" />
</a>

This is essentially identical to our previous Galleria bootstrapping with the simple exception that we're loading the new galleria.basic.js theme instead of the classic theme in the following screenshot: