Category Archives: JavaScript/jQuery

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

Bracket Style and Indenting Code

I’ll try to keep this short. Having been coding for years I’ve seen a lot of examples of how other people write code. Now while there are certain requirements in coding, there are areas where you can inject your own person style or preference. One area that has always bugged me is how code is indented and how brackets are used to separate blocks of code. Here’s a very simple example of how I normally code a simple if/else block:

if (hours < 24 && minutes < 60 && seconds < 60)
{
 return true;
}
else
{
 return false;
}

This is known as Allman style (named after Eric Allman, the developer of sendmail). The most common variant of this would be K&R style (from Kernighan and Ritchie’s book The C Programming Language) and the same code looks like this:

if (hours < 24 && minutes < 60 && seconds < 60) {
 return true;
} else {
 return false;
}

Equivalent in every way except readability. Some people call this “The One True Brace Style” because it’s been around so long. The major difference is that the opening bracket is placed at the end of the line that the control statement is on where in Allman style the brackets are each on their own line.

To me it makes sense to make code as readable as possible by lining up brackets to match the block they go with. It becomes apparent what blocks of code belong to what conditions.

Allman style
 
K&R style

If I was to have another condition nested within the example, it would look like this:

if (hours < 24 && minutes < 60 && seconds < 60)
{
 if(hours % 2 == 0)
 {
 	return true;
 }
 else
 {
 	return false;
 }
}

Again, very readable.

The funny thing about K&R style is that its roots seems to be based in the fact that programmers used to have to deal with limited screen space and by squishing the brackets together with the blocks that they belonged to, it saved precious screen real estate. Most programmers either picked up the style they use most often from learning coding in a class or by following the examples set by others, while other programmers code for readability, especially now that space isn’t the issue it once was.

While Allman and K&R are just two of the most popular styles (see
http://en.wikipedia.org/wiki/Indent_style
and
http://en.wikipedia.org/wiki/Programming_style
for some others and a detailed explanation about the history of each)

(please pardon the less than perfect wordpress code formatting)