A JavaScript image gallery for the fastidious.

Update 28/4 - 2010 - We're currently working on releasing Galleria 1.2, along with some comprehensive documentation. Stay tuned!

Galleria can create, scale and crop images on the fly, making your gallery layout flexible towards any existing design.

Galleria can use almost any exiting markup to fetch gallery data. If the client does not meet the necessary requirements, the gallery will degrade to it's initial state.

Galleria uses a convenient Theme API that makes gallery styling and customization a breeze.

Use a custom feed from your Flickr account or any other external feed to display images on your web site.

Galleria is built to perform at it's best regardless of browser environment using clever interpolation methods and jQuery's appraised animations.

Include jQuery and Galleria on your web page.

Use the Galleria.loadTheme() to load a Galleria theme:

<script>
    Galleria.loadTheme('/js/galleria/themes/classic/galleria.classic.js');
</script>

You can also load it using the src attribute:

<script src="/js/galleria/themes/classic/galleria.classic.js"></script>

There are several ways of adding image data to your gallery, but the simplets way is probably to add some HTML.

Just put the images inside any container on the site:

<div id="gallery>
    <img src="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/img/pic1.jpg" alt="My description" title="My title">
    <img src="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/img/pic2.jpg" alt="Another text" title="Another title">
</div>

If you want separate thumbnails, just add them as a link:

<div id="gallery>
    <a href="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/img/large1.jpg"><img src="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/img/thumb1.jpg" alt="My description" title="My title"></a>
    <a href="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/img/large2.jpg"><img src="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/img/thumb2.jpg" alt="Another text" title="Another title"></a>
</div>

You can also define the images as a JSON array. See the "getting started" doc for more info.

Galleria also provides plugins to fetch image data from other sources like Flickr & SlideShowPro.

When DOM is ready, you can run Galleria:

<script>
    $('#gallery').galleria();
</script>

The galleria function takes two arguments, theme and options. If no theme is specified, the last theme loaded is used. The options argument is an object with Galleria options that you can use. See the options documentation for a complete list.

If you run into problems, try passing debug: true as an option or set Galleria.debug = true to trace errors. Good luck!