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 plugins (Simple)


Here we will learn how to install and utilize Galleria plugins. There are several different plugins that will allow you to enhance Galleria in many different ways.

Getting ready

Using the myfirstgallery.html file we created in the first section, we'll customize it to include the history plugin that is packaged with Galleria.

How to do it...

All that is required to install a plugin is to include its JavaScript file. Place the following code inside the head tag:

<script src="../galleria-1.2.8.min.js"></script>
<script src="../plugins/history/galleria.history.min.js">
</script>
<script type="text/javascript">
  $(document).ready(function(){
    Galleria.loadTheme('../themes/classic/galleria.classic.min.js');
    Galleria.run('#galleria');
  });
</script>

How it works...

With plugins, it's possible to hook into Galleria to customize its behavior. This ranges from customizing how Galleria retrieves its images, what images it loads, and how it handles JavaScript events.

In the case of the history plugin for image change, it adds a hash value to the URL so that each image visited in the gallery can have a unique URL. This allows users to link directly to an image inside the gallery. Then, when the page is requested with the specified hash, it will load that image instead of the initial image in the gallery and also allow the user to go backward/forward in history.

There's more...

Galleria includes three plugins in its distribution: flickr, picasa, and history. The flickr and picasa plugins provide an ability to view galleries directly from those photo services.