Download Files from Galleria for Your Website

If you use Galleria to build a photo portfolio for your website to display on the iPad and iPhone, you need to download files from the Galleria website. After you have the jQuery library installed, follow these instructions to download everything you need from the Galleria website:

1

Launch a browser and navigate to the Galleria website.

This page contains information on the latest builds of Galleria and examples of galleries created with their themes and script.

2

Click the Download button at the top of the page.

The browser takes you to the GitHub download page for Galleria. GitHub encourages you to sign up to receive updates or share your own code. You don’t have to do this in order to download Galleria.

3

Click the Download Galleria link.

Depending on the web browser you’re using and the settings you have specified, the .zip file either downloads automatically or the Download Source dialog window opens and you can save the file to your hard drive.

4

Use a decompression program to unpack the contents of the file.

Most modern computers automatically unzip the contents when you double-click a .zip file. This step creates a folder named galleria-1.2.3 (or whatever they named the most recent version). This folder contains a folder named galleria, and it contains subfolders with the script and theme files.

5

Copy the galleria folder into the main root folder of your website.

The galleria folder and the subfolders with the script and theme files are copied to your websites main root folder.

6

Create a new page or open the web page where you want to add the gallery in your favorite web design program.

Adobe Dreamweaver is a good choice, but there are many others to choose from.

7

Insert the code to load the Galleria theme into your web page:

<script>
Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');
         $("#gallery").galleria({
             width: 500,
             height: 450
         });
</script>

The height and width in the preceding Galleria theme code can be edited to fit your images and designs.

This bit of code works with the free version of Galleria, which comes with the Classic theme. Though the theme is included in the current version of the site, you should check the most recent documentation on the Galleria website and review the contents of the galleria folder you download, to ensure that the theme referenced in the preceding code is still current.

8

Make sure the images you want to feature in your Galleria gallery are stored within the main root folder of your website.

If they’re not stored in the main root folder, they won’t display properly.

9

Add the following code between the <body> tags on your website updating the image names and path for the images to match your site.

The HTML code looks like this:

<div id="gallery">
    <img src="/images/photo1.jpg" alt="stained glass collage" title="Stained Glass Collage">
    <img src="/images/photo2.jpg" alt="museum installation" title="Museum Installation">
</div>
10

Add the link to the script in the <head> section of your web page using this code:

<script src="galleria/galleria-1.2.3.min.js"></script>

When you download the script from Galleria, you may get a more recent version of the JavaScript file, so check the name.

You can customize the way Galleria displays your photos in a variety of ways by editing the script and the CSS. For a complete rundown on the available options, visit the Galleria website.

blog comments powered by Disqus
Advertisement

Inside Dummies.com

Dummies.com Sweepstakes

Win $500. Easy.