In this recipe, we're going to go through the basics of creating a Galleria gallery. HTML structure and Galleria JavaScript are topics that will be covered in this recipe.
Assemble together a group of images that you'll use while working with Galleria and place them into your Galleria development image source directory (galleria/development/images).
Create a
myfirstgallery.htmlfile inside thedevelopmentfolder.Start off with the usual HTML5 doctype structure.
Inside the head section include the JavaScript dependencies,
jquery.jsandgalleria.js. In both the cases, we'll use the following minified versions:<!DOCTYPE html> <html lang="en"> <head> <script src="http://code.jquery.com/jquery.min.js"> </script> <script src="../galleria-1.2.8.min.js"></script> /* end of Javascript file includes */Make sure the relative path used to reference
galleria.jsis correct for the folder structure being used.Tip
Downloading the example code
You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the files e-mailed directly to you.
Next, we'll need to provide the following code to initialize the gallery:
/* end of Javascript file includes */ <script> $(document).ready(function(){ Galleria.loadTheme( '../themes/classic/galleria.classic.min.js'); Galleria.run('#galleria'); }); </script> </head> /* end of head tag */Here,
$(document).readyis a jQuery construct used to run the code inside the anonymous function after the document is ready. This is important because we need to load the gallery after all the images are loaded in the DOM.The
Galleria.loadThemefunction loads the theme file. It takes only one parameter, the path of the JavaScript file.Finally, the
Galleria.runfunction is used to wire a gallery up via a CSS selector. In this case,#galleriarefers to a tag with the ID of "galleria" that we'll define later.
Next, we'll add references to the images we want to provide in the gallery. The standard way to do this, demonstrated here, is to provide them through an HTML structure. The basic structure is to provide the full size image as the
hrefattribute of an anchor tag. The thumbnail image is defined via animgtag. If you have not generated thumbnails, just use your full size image for the thumbnail.Inside the body tag, we'll provide the following HTML code to reference the images for our gallery:
<body> <div id="galleria" style="height: 500px;"> <a href="images/image1-1600px.jpg"> <img data-title="Image 1" data-description="Image 1 description" src="images/image1-200px.jpg" /> </a> <!-- Additional images in same HTML format can be provided below --> </div> </body>
The
id="galleria"attribute and value refers to what we were using with theGalleria.runmethod to instruct Galleria where to look for the imagesThe
style="height: 500px;"attribute and value gives a height to the gallery, which is required for Galleria to functionThe
data-titleattribute is where we can give our image a title that the theme will useFinally, the
data-descriptionattribute, similar to the title attribute, gives the image a description to be shown in the gallery
Galleria searches the div tag with the id "galleria" to find images to load the gallery. Galleria then calls the theme JavaScript initialization code to generate additional HTML and JavaScript events that set up the gallery further. Essentially, galleria.js provides the basic gallery components and the theme uses these components to further customize the look and feel of the gallery.
It is important to define a height for all Galleria galleries. If no height is defined in CSS or a style tag, the gallery will fail to load.
In this example, we use data attributes, which are attributes that start with "data-", to define the title and description of the image. We could have just as easily specified title and alt attributes that would also populate the title and description values. Either way works the same.