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.
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.
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
developmentdirectory, we'll then create animagesfolder. 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.htmland 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:
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 waygalleria.jsworks. For instance, there is aflickrplugin to get images from flickr and not from the HTML DOM as that is used frequently.
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.
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.