Book Image

Instant Galleria How-to

By : Nathan Van Gheem
Book Image

Instant Galleria How-to

By: Nathan Van Gheem

Overview of this book

Providing beautiful and usable galleries is an important aspect of the Web today. A gallery solution needs to integrate into your web application easily and seamlessly. Users expect mobile sites that function on par with their desktop counterparts‚Äîespecially for image galleries. In order to accomplish these tasks, you need to use a JavaScript (not Flash) that is extensible and scales to mobile devices. "Instant Galleria How-to" will teach you how to use Galleria in advanced scenarios to become an expert and integrate Galleria into your next project using themes and plugins to accomplish any task. This book teaches you how to use and create themes and plugins,  using the Galleria API through a series of recipes that include a plethora of code examples. You'll be taken through detailed instructions on the usage of JavaScript to customize Galleria. You will create your own theme (mobile friendly), plugin, and learn all the configuration options of Galleria. You'll learn how to customize Galleria by using its extensive API, optimize Galleria, integrate with Google Analytics, create tests for your customization, and integrate into your web application. You'll become an expert user of the Galleria framework, which will enable you to deploy beautiful, mobile friendly galleries for your next web project.
Table of Contents (7 chapters)

Installing themes (Simple)


Installing different themes will allow us to give Galleria a different look and feel, and in this recipe we will explore how we can use themes and install them.

Getting ready

The theme we'll be working with is the classic theme that comes with the Galleria source code.

How to do it...

There are two ways by which we can load theme files into Galleria:

  1. The first is to use the Galleria API to load the theme JavaScript file:

    Galleria.loadTheme('../themes/classic/galleria.classic.min.js');

    The only parameter the loadTheme function takes is a string that is the relative path to the theme JavaScript file.

  2. The second way to load the theme JavaScript file is simply to include the JavaScript file via the script tag as follows:

    <script src="../themes/classic/galleria.classic.min.js">
    </script>

The theme JavaScript file needs to be loaded before the Galleria.run function in order to start Galleria with the theme loaded.

How it works...

The theme file will automatically load dependent CSS files required for the theme. It will additionally run initialization code for theme specific look and feel.

There's more...

It's possible to dynamically change Galleria themes by loading other themes with the Galleria.loadTheme function.

Downloading Galleria themes

Galleria only comes with one free theme, the Classic theme, which comes with the Galleria source code. Other themes can be found at http://galleria.io/.

As of the writing of this book, there are no other useful sources for themes for Galleria. Sparse references to themes can be found in some github projects and also in some CMS Galleria integration packages. However, it's not easy to know how to use these themes without some customization, so we won't cover them in this book.