jQuery Panel Gallery Plugin

The other day I went looking for a simple way using jQuery to fade between a set
of images on a page. I found a few good plugins, some with many options, but none that
did exactly what I was looking for. InnerFade came close, as did jQuery Cycle, but neither had the effect that I wanted, nor the simplicity and reusability that I needed. So, being a coder, I set out to create my own plugin. I was mainly looking for a simple way to take a group of images and transition from one to the other in a smooth, visually appealing way. I’ve seen countless galleries where one image fades into another and I like that effect, but wanted to come up with something new, so I began writing my first jQuery plugin. I didn’t set out to make a “gallery” per se, however when I was done, I realized that that was really what I had ended up with. Let me take a moment to say that I’m fairly new to jQuery and even newer to writing jQuery plugins — in fact this my first one, however I’ve tested this as much as I can, and made it as small as I can (without compressing it), and it works with everything I’ve thrown at it. So to make a long story short, here’s what I ended up with:

So what’s the big deal? Well first off, and the best part in my opinion, is that not one image needs to be sliced or edited to work with this plugin, in fact the plugin handles everything itself. Next, you can choose the direction in which the transition occurs from left to right, right to left, top to bottom, or bottom to top. You can set the initial delay before the transitions begin, set the transitions to loop or stop after the last image, set the time it takes for each panel to appear, and set the delay between the images. Phew. All in a plugin that’s less than 5k uncompressed. Not bad.

Note: the latest version of the Panel Gallery is available here.

Download

Download version 1.1 here

Download jquery.panelgallery.js (version 1.0)

What’s So Great About this Plugin?

• No slicing or editing of the images is needed
• It’s just 5K
• Easily configurable
• Reusable on multiple containers

How to Use

First, all of your images should be the same size and wrapped in a containing element
(I recommend a div) which must have an ID. Any images will work, however transparent images aren’t recommended. Finally, your container element should be positioned (e.g. relative, absolute, etc.). The container needs to be positioned otherwise the images within it won’t end up in the right spot on your page.

<div id="container" style="position:relative">
	<img src="image1.jpg" alt="image 1" width="500" height="250" />
	<img src="image2.jpg" alt="image 2" width="500" height="250" />
	<img src="image3.jpg" alt="image 3" width="500" height="250" />
	.
	.
	.
</div>

All images *MUST* have the width and height declared otherwise the plugin won’t
work in Safari, Chrome, and any other webkit-based browsers. Also, all images should
be the same size. You can mix various image formats like Gif, Jpg, and Png, however
transparent images aren’t recommended.

To use the plugin you’ll need to have a copy of jQuery, or point to jquery on Google, and the plugin. Place the files on your site and link to them:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.panelgallery.js"></script>
<script type="text/javascript">
$(function(){
	$('#container').panelGallery();
});
</script>

$('#container').panelGallery({
	sections:5,
	imageTransitionDelay :3000,
	startDelay:5000,
	sectionTransitionDelay : 700,
	repeat:false,
	direction:"tb"
});

Demos

• Example 1
• Example 2
• Example 3 (uses two panelGalleries on the same page with different configurations)