Galleria How-to | Instant Galleria How-to

Setting up the development environment (Simple)

This section will cover how to get prepared to start developing with Galleria. We'll install and run Galleria with the classic theme, create the folder structure, and set up the development environment.

Getting ready

Before we start developing with Galleria, you'll need a text editor to use throughout this book since we'll be modifying HTML, JavaScript, and CSS.

How to do it...

First, you'll need to download the Galleria source code. In a web browser, visit http://galleria.io/download and download the latest Galleria source code. At the time this book was written, Galleria was at Version 1.2.8.
Once the download is finished, extract it, and inspect the contents of the download.
We'll then add a new folder in the previous extracted source and name it development. This is where we'll do all our Galleria development for the rest of the book.
Inside the development directory, we'll then create an images folder. Please insert test images in this folder to use with the development galleries we'll create.
Once done, the contents of the Galleria source should look like the following screenshot:
Next, let's test whether the downloaded Galleria source code is working properly or not. Galleria comes with a free default theme called "classic". Navigate to themes/classic/classic-demo.html and open the file in a modern web browser (Google Chrome, Firefox, or Microsoft Internet Explorer version 8 or later), which should result in the following gallery:

Galleria components

Here, we'll cover that part of Galleria that provides the gallery functionality.

galleria.js: This is the gallery script that loads images and facilitates the gallery functionality.
theme javascript: A theme consists of a combination of JavaScript, HTML, and CSS to provide a unique load and feel.
plugins: These plugins are used to extend and override the way galleria.js works. For instance, there is a flickr plugin to get images from flickr and not from the HTML DOM as that is used frequently.

If you don't have a text editor...

There are many great open source text editors that you can use to edit HTML, JavaScript, and CSS. For Windows, Notepad++ is a great text editor. It can be found at http://notepad-plus-plus.org/. For Mac OS X, TextWrangler is a very good free text editor that can be found at http://www.barebones.com/products/TextWrangler/.

You are also free to use the default text editors that come with your operating system but they're usually not as easy to use for development.

Extracting the source code

The Galleria source code download will come in a zipped archive format that is extractable on most modern operating systems. If you have trouble extracting the source code for Windows, use 7zip, available at http://www.7-zip.org/. Mac OS X should be able to extract all archive types you come across.

Tech Concepts

Programming languages

Tech Tools

Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

50+ new titles added per month and exclusive early access to books as they are being written.

Instant Galleria How-to

By : Nathan Van Gheem

Instant Galleria How-to

By: Nathan Van Gheem

Overview of this book