jReelGallery – Cross browser fluid jQuery image gallery

DOWNLOAD DEMO

The plugin

This little jQuery image gallery plugin is basicly recreates the standard built-in window scrolling with a smooth easing effect. It is still in an early, development state, thus it may suffer from issues; but I will be working on it to make jReelGallery a more solid and robust widget.

The idea came while I was browsing the internet for available galleries for jQuery. I have seen a lot of good solutions but none of them fullfilles all the requirements I have been looking for. I decided to create a new plugin with all the features I need or consider as important: simplicity, usability and light-weight code.

Usability

Nowdays usability should be a very important and crucial part of a any web project. By extending the availability of your site and presenting it to wider audience, you increase the probability of achieving more visits which is leading to more sales, conversions and success.

In programming soemtimes it is really hard but not impossible at all to be light-weight and userfriendly at the same time. Sometimes you need to sacrifice a few things to stay between of the limits. This time the sacrifice was to give up the degradation when javascript is turned off. Whats left is a nice navigation: the plugin provides several ways to scan through the gallery. Mainly all the default(?) features, namely mouse scrolling, up and down arrow keys, home and end buttons, you would use while browsing in a window are available. In the future I would like to widen the “shortcuts” to include page down / up as well. Moreover, make it possible to configure it as you wish.

Usage

HTML

<ul id="jreel-gallery">
	<li><img src="images/1.jpg" alt="1.jpg" /></li>
	<li><img src="images/2.jpg" alt="2.jpg" /></li>
	<li><img src="images/3.jpg" alt="3.jpg" /></li>
</ul>

JavaScript

jQuery(document).ready(
	function(){
		$('#images').css('height',$(window).height()); /* I set the height by javascript to fill the full screen */
		$("ul#jreel-gallery").reelGallery();
	}
);

CSS

ul#jreel-gallery {
	width: 400px;
	height: 1px; /* In the example I set the height by javascript, see above */
	margin: 0 auto;
	padding: 0px 50px;
	overflow: hidden;
}

ul#jreel-gallery li {
	width: 400px;
	height: 300px; // Important! See below
	background: #fff;
	margin: 35px 0px;
	position: relative;
}
ul#jreel-gallery img {
		width: 400px;
		height: 300px; // Important! See below
	}

Note: I use precise dimensions for the images. It is not necessary to give the proper size of each and every image, but it comes with a price. The code itself contains an algorithm for this case that will calculate the all the heights by measuring the images. Problem is solves, or isn’t? No, because to calculate the proper size all the images, they have to be loaded before the algorithm is running. This means you need to use a preloader for your website or otherwise you are forced to give the dimensions by hand. It’s up to you. I suggest using a preloader.

In the demo I’m using a preloader, because I want to show the full potential of the plugin. I combined it the famous thickbox plugin and a PHP on-the-fly thumbnail generator.

Options

Sources

• jQuery MouseWheel by Brandon Aaron
• Thickbox 3.1 – One Box To Rule Them All by Cody Lindley
• Query Loader by Gaya Kessler