Accordion Gallery

jQuery Plugin

Accordion Gallery is a lightweight jQuery plugin, providing a unique and innovative image gallery, with rich effects, semantic markup, and accessibility in mind.

Using HTML5 markup, CSS3 properties and transitions where available, and optimized code, Accordion Gallery is both powerful and flexible, being very easy to set up, customize, and even create your own themes.

Besides all of this, it includes support for mobile devices, being tested on Android, iOS(iPod Touch, iPhone and iPad), Symbian(Nokia phones), Palm Pre, and Opera Mini and Mobile.

Using CSS3 transitions the gallery has the main benefit of being hardware accelerated on mobile devices, making the effects faster and more responsive.

Features

Full semantic HTML5 markup
Use of CSS3 transitions(where available) for animations
Support for multiple galleries on a page
Full standard keyboard navigation
Accessible by screen reader or other assistive technology
Easy to set up and maintain
No less than 7 great looking themes from the start
Very easy to create your own themes with CSS
Graceful degradation when JavaScript is not available

Notice:
Some themes use CSS 3 to achieve some of the beautiful effects you can see in the examples. Because of this, when using the included themes, some features such as rounded corners, shadows, and others, will not be present on Internet Explorer 8 and bellow.
This does not affect the actual functionality of the gallery.

Examples

How to use

1. Use a valid HTML5 DOCTYPE

Accordion Gallery uses semantic HTML5 markup, therefore you'll have to use a HTML5 doctype.

2. Include JavaScript

As Accordion Gallery is a jQuery plugin, you'll need to include jQuery. You can include it from Google's CDN, without needing to upload it to your own server.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

Next include Accordion Gallery.

<script type="text/javascript" src="js/jquery.accordiongallery.min.js"></script>

If you need support for IE8 and bellow include the following script in your <head> element above your CSS

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

3. Include CSS

Include the Accordion Gallery core CSS.

<link rel="stylesheet" href="css/accordiongallery.core.css" type="text/css" />

Include the theme CSS. Even if you are using the default 'Air' theme, you'll need to include the specific CSS, in this case for the 'Air' theme.

<link rel="stylesheet" href="themes/air/accordiongallery.air.css" type="text/css" />

4. Create gallery markup

First, create a wrapper element. I preffer using the HTML5 <article> tag, but you're free to use any tag you want(eg. <div>).

<article>

Next, create each section/category using <section> tags, and images.

<section>	
	<a href="/large/image/path.jpg" title="Longer image caption">
		<img src="thumb/path.jpg" width="125" height="90" alt="alternative text" />		
	</a>
	<a href="/large/image/path.jpg" title="Longer image caption">
		<img src="thumb/path.jpg" width="125" height="90" alt="alternative text" />		
	</a>	
</section>

Notes

The title attribute provided on the <a> tag is used as the image caption, once it has been enlarged.
If you don't provide a title, the image will not have any caption.

Other flexibility notes

You don't necessarily have to use <img> tags inside the anchors. You can use any other markup you want, such as text, other images, flash, or even audio/video content.
You can also include any other markup before or after the images, such as other wrappers, titles, or any other markup.

The markup is extremely flexible and allows for full customization of your gallery. See the code of the examples for more possibilities.

5. Initialize plugin with jQuery selector

If you are not familiar with jQuery, please, read this jQuery tutorial for beginners.

<script>
	$(document).ready(function() {
		$('#gallery').accordionGallery();
	});
</script>

This will initialize the gallery using the default options. See the available options bellow.

The #gallery element is the wrapper of the <section> elements.

Available options

You can pass options as key/value object when initializing the plugin, to the accordionGallery() function.

Key	Default value	Description
theme	'air'	Theme to be used by gallery. The value is added as an extra class to the gallery wrapper. Remember to include the theme CSS file
maxHeight	360	Maximum height the thumbs(links) can occupy before adding vertical scroll controls, in px.
scrollSpeed	2000	Thumb scrolling speed, in milliseconds. Bigger is slower.
minSliceWidth	100	The width of the inactive slices(sections/categories), once an image has been enlarged. Value in px.
maxSliceWidth	500	The width of the active slice(section/category), once an image has been enlarged. Value in px.
maxSliceHeight	480	The height of the active slice(section/category), once an image has been enlarged. Value in px.

Themes

air - Clean theme inspired by KDE’s Oxygen style
element - Minimalist theme inspired by Elementary Project
folder - Warm theme with shadows and rounded corners
minimal - Minimal theme with white and pink
oxygen - Dark theme inspired by KDE’s Oxygen style
polaroid - Polaroid theme with wood and rotated images
square - Minimalist theme focusing on pictures and text

Check out the examples to see them in action.

Support

I'd be glad to help you if you have any related questions.

I can also offer support for help with setting up, additional themes or functionality.