Of course, the solution is a plain JavaScript setTimeout. The tricky bit was that for some reason this kind of code didn’t work:

thumbTimer = setTimeout( loadThumbs(), 70 );

In the end I had to use this:

thumbTimer = setTimeout( function() { loadThumbs(); }, 70 );

Grooooaaaaannn… Well, here’s the full function:

function loadThumbs() {
		var thumbTimer;
		// Initialize / increment counter
		if ( typeof loadThumbs.counter == 'undefined' ) {
			loadThumbs.counter = 0;
		} else {
			loadThumbs.counter++;
		}
		if ( loadThumbs.counter < numThumbs ) {
			// Load and fade in a thumbnail
			$( "#thumbnails" ).append( '<div class="tn" id="tn-' + loadThumbs.counter + '"><a href="[????]" title="Click to see full size"><div class="thumbnail" style="display:none;width:86px;height:86px;overflow:hidden;background:url([????]) no-repeat ' + ( 0 - ( loadThumbs.counter * 86 ) ) + 'px 0px" /></a></div>' );
			$( "#tn-" + loadThumbs.counter + " div.thumbnail" ).fadeIn( 500 );
			thumbTimer = setTimeout( function() { loadThumbs(); }, 70 );
		} else {
			// All thumbs loaded, add "glow" event
			$( ".tn a" ).mouseover( function() {
				$( this ).children( ".thumbnail" ).stop( true, true ).animate({
					opacity: 0.6
				}, 200, "swing", function() {
					$( this ).animate({
						opacity: 1
					}, 400 );
				});
			});
		}
	}
}

A few words of explanation:

• This code isn’t “self-contained”! You can’t just drop it somewhere and have stuff happen. I’m posting it to convey as specific bit of syntax (described above), and give it a bit of context. You’ll need a bunch of other HTML and CSS to get this going, and it should be obvious what’s needed. If it’s not, please Google for a complete image gallery solution.
• You’ll need to call loadThumbs once the page is loaded, of course.
• You’ll also need to set numThumbs inline on the page somewhere. I’m working this out server-side and using PHP to write the JS. You could try something else if you want…
• The code is designed to work with a pre-existing div with thumbnails as an ID on the page.
• Replace instances of [????] with your URL structure to full-size images and thumbnails.
• For various reasons, I’m working with one big image which has all the thumbnails in a strip. Each thumbnails is 86 x 86 pixels, and each thumbnail’s div includes it as a background image, its position shifted to show the right bit.
• Tweak the fadeIn and setTimeout millisecond settings as necessary!
• I’ve include a nice “glow” effect as a bonus. :)

A very simple effect, and in the end doing it in jQuery was pretty simple, but I thought I’d document it. My technique has one caveat: it relies on the background being white, because it basically achieves the effect by temporarily reducing the opacity of the thumbnail image. If you have a background colour different from the colour you want the image to “glow” with, I’m sure there’s a way. You could probably use positioning to put a blank white image behind the thumbnail, and use this technique as-is.

Anyway, here’s some typical HTML:

<div class="thumbnail">
	<a href="fullsize.html"><img src="thumb.jpg" alt="thumbnail" /></a>
</div>

And here’s the important stuff, the jQuery:

jQuery( document ).ready( function($) {
	$( ".thumbnail a" ).mouseover( function() {
		$( this ).children( "img" ).stop( true, true ).animate({
			opacity: 0.6
		}, 200, "swing", function() {
			$( this ).animate({
				opacity: 1
			}, 400 );
		});
	});
});

The stop() function in line 3 clears any queued-up effects when the mouse goes over. This stops things looking weird when someone goes crazy fast with their mouse.

The first opacity setting is for the “glow” to come through from the white background. If you want a brighter glow, make this value lower. The 200 just after is the number of milliseconds it’ll take for it to get to that opacity.

Then there’s the callback function which restores the original opacity. Again, the 400 is the timing value. Adjust this and the 200 to change the “rhythm” of the glow effect.

Have fun with it!

However, I just had some problems getting some jQuery to run on the login / registration form. I used wp_enqueue_script like a good WP developer but… no go. Where’s my jQuery?

It seems the answer lies in the fact that after scripts are enqueued in a normal WP page, they get spit out by something inside the call to wp_head(). I guess you could add wp_head() to the login header, but who wants all those redundant plugin scripts and styles that (presumably) aren’t even meant to be there.

After a bit of digging around it seems that the solution is the wp_print_scripts() function. So, to get jQuery working on the login form, put these lines in the code you hook onto login_head:

wp_enqueue_script( 'jquery' );
wp_print_scripts();

It’s not just being stubborn, though. Sometimes you want to re-invent the wheel so you know how to make better wheels yourself. In coding, you have to strike a balance between getting stuff done quickly and efficiently by relying on what’s already been done, and actually progressing your own skills.

Anyway, today I solved something that had been bugging me for a while: creating slick drop-down menus. I know CSS-based drop-downs, and they’re a good thing. But having got into jQuery recently, I wanted to get them right with scripting.

The main trick I’d missed was how to make sure that if the cursor passes quickly over a menu item, the “show menu” bit doesn’t get triggered—preventing shoddy, jittery menus popping up all over as you reach for the page scroller or something.

Well, after a few hours’ wrangling, here’s the code:

jQuery( document ).ready( function($) {
	var navTimers = [];
	$( "#nav-main ul.nav > li" ).hover(
		function () {
			var id = jQuery.data( this );
			var $this = $( this );
			navTimers[id] = setTimeout( function() {
				$this.children( 'ul' ).fadeIn( 300 );
				navTimers[id] = "";
			}, 300 );
		},
		function () {
			var id = jQuery.data( this );
			if ( navTimers[id] != "" ) {
				clearTimeout( navTimers[id] );
			} else {
				$( this ).children( "ul" ).fadeOut( 200 );
			}
		}
	);
});

A few words of explanation:

The navTimers array is crucial. The key to all this is storing a separate setTimeout() timer reference for each menu element that the cursor goes over.

OK, so #nav-main ul.nav > li selects the immediate children of my main nav menu list, and then I set up the hover functions.

The first line in each hover function uses the jQuery data() function, which returns a unique ID for the current element (just an integer, which seems to be related to the order of the elements). We use that as our key for the navTimers array.

In the “over” function, we create a reference to the jQuery object for the current element, so we can pass it through to the function inside setTimeout(). Then when initialize the setTimeout() itself, the function inside it doing two things:

1. Triggers the jQuery fadeIn() effect.
2. Clears its own reference in navTimers. (Actually I’m not sure if this is cleared automatically after the timer expires—I did this just to be safe.)

That 300 at the end of the setTimeout() is the number of milliseconds it’ll wait before triggering the fadeIn(). The 300 inside the fadeIn() is the number of milliseconds jQuery will take to do the fade.

The “out” function checks if there’s a timer set for the current element. If there is, it just clears it. This is the eventuality where the cursor has gone over and then out of the element’s space within our set limit (300 ms). If there isn’t a timer, i.e. the timer’s expired and the drop-down’s been shown, then it hides the drop-down.

Whew! Do let me know if you spot any issues, or ways of doing things better.

Oh, if you’re here looking for a ready-made drop-down menu solution, including markup and CSS… apologies, but this post is to help out other who are being stubborn and a re-inventing the wheel ;-). But really, if you can’t find a good plugin (I’m working within the WordPress world here by the way), the markup and CSS are the easy bits. Hopefully the above helps out with the tricky JavaScript.

UPDATE 29/7/11: It seems that as of jQuery 1.4, jQuery.data( elem ) no longer returns a unique ID for the element. I’ve not worked with the above code for a while, but I imagine it’s broken for 1.4. The new way that the data method works is to store key / value data associated with an element. The above code might be rewritten for 1.4 to store that timer objects in each element using this method. Please contact me if you come up with a new version!