jQuery Panel Gallery Plugin

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>

That’s it! You can apply the panel gallery to any number of elements on a page.

Options

The following options are configurable:

  • sections – the number of panels to divine each image into (default: 3)
  • imageTransitionDelay – the time (in milliseconds) to pause between a
    completed image and the next image (default: 3000)
  • startDelay – the time (in milliseconds) to pause before beginning the first transition (default: 2000)
  • sectionTransitionDelay – the time (in milliseconds) to pause between each section of an image (default: 700)
  • repeat – whether to endlessly repeat the series of images (default: true)
  • direction – the direction of the transitions: “lr” (left to right), “rl” (right to left), “tb” (top to bottom), and “bt” (bottom to top) (default: “lr”)

Options are added when calling the script:

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

Enjoy!

Demos

148 thoughts on “jQuery Panel Gallery Plugin”

  1. Hi
    Your plugin works just fine on Apple Mac and firefox and on some windows versions but on Windows 8, all i can see is the whole of the screen is filled with the small rotating images expanded to fill the entire screen.
    Any help would be welcome.

    thanks for your work.

    jack

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>