jQuery Panel Gallery Plugin 1.2

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

I’m happy to announce the release of version 1.2. This version adds the ability to pause the transitions simply by placing your mouse over the image as well as specify an amount of overlap in terms of the time of the section transitions.

The best part of this plugin is that not one image needs to be sliced or edited to work with it. 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 – now for each image individually. 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.

Download

Download jquery.panelgallery-1_2.js

What’s So Great About this Plugin?

• No slicing or editing of the images is needed
• It’s just 8 KB
• Each image can have its own fade direction
• The gallery can be set to pause on mouseover (new)
• Section transition timing can be set to overlap (new)
• 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-1_1.js"></script>
<script type="text/javascript">
$(function(){
	$('#container').panelGallery();
});
</script>

<img src="image2.jpg" alt="image 2" name="bt" width="500" height="250" />

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

Demos

• Example 1
• Example 2

I’m working on a complete redesign of a site that’s been unchanged for about six years now and among other things, jQuery is being used in the project. I was tinkering with the contact form on this site and was thinking of the bazillions of forms I’ve seen on the web, and how when it comes to forms, contact forms are usually the most basic (although that’s not always the case). Fortunately for me, it is for this form. All that’s needed here is the visitor’s name, email and their comment (all required). Plus a CAPTCHA but that’s not going to change for the redesign. So I was thinking, how could I make this form a) functional (i.e. easy to use) and b) unique? Since this form is pretty basic there wasn’t a whole lot of room to create something that would be useful as well as interesting.

One thing I like to see in forms in general is default text that disappears when a field is clicked on. This tells the visitor what type of input is expected without getting in their way. The most basic JavaScript code would do this with a call to the onfocus event which would clear out the contents of the field. Nothing new. Better code would replace the default text if the visitor leaves the field (onblur) without entering anything. So I set my sights on coming up with something different to accomplish the same effect. Here’s the result (note that the email field has an easing effect applied to it):

As you can see, the default text here smoothly animates out of view once the field is focused on (via keyboard or mouse). Turn JavaScript off and the form works perfectly; however the effect no longer exists, so it also degrades without a problem. Note that I’m not entering a textual default value for the various fields and then deleting the text with jQuery because if the visitor has JavaScript disabled (both of you) then they would have to manually delete the default text, which is more annoying then helpful.

When the user leaves a field, the default text doesn’t return if they have entered something. However if it’s blank, then the default text slides on back in. Unobtrusive, eye-catching, and unique.

All of this is accomplished by manipulating the background image of each text field. jQuery 1.3.2 can animate the background image of an element horizontally (on the x axis) but not vertically. A nice plugin by Alexander Farkas can handle this in case you want to change the effect to look like this (here the comments field has a different easing effect applied to it):

When we focus on a field we slide the background image out of view, and when we leave the field we check the length to see if it is empty in which case the image needs to be moved back to its original position. The typical JavaScript technique that creates or deletes a text field’s default text usually also needs to check to see if the current value of the text field matches the default text since you don’t want whatever is in the text field to disappear every time the field gets focus. Imagine if you entered your name in a field, realized you misspelled it, then clicked back to correct it only to have the whole thing disappear. We don’t have to deal with that scenario here at all since we only check the length of the text in the text box on the onblur event and don’t care about what was entered as long as something was entered. I’ll leave data validation for PHP on the server side for this form. Come to think of it, this method could probably be extended to highlight required fields and perform some basic error checking.