Last weekend I started my first jQuery plugin. It was for a piece of javascript I had used once and was about to use again and it occurred to me that this is exactly what plugins are for. Last night I finished it and released it on the jQuery Plugin site. You can see my apply named Image Loader Plugin on jQuery’s Plugin site right now. But I still made my own official site for Image Loader on my own site.

The plugin itself is fairly simple. You give it an array and it will load your images for you. I needed this because I recently used the jQuery Cycle Plugin for a slideshow for a client. The site loaded 20 rather large images and having the user just sit there and see nothing just wasn’t going to do, so some sort of loading splash screen was needed while images were loaded. And that’s what Image Loader does.

I approached this as an exercise to see what writing a plugin was all about and as a chance to write something that’s open source and supported for more than myself, basically to push myself in new directions. All in all it was well worth the time. Here’s few things I took away from this:

1. Turning my own code into a plugin for more than just myself forced me to look at the whole approach I took. So much so that I quickly changed how the plugin worked. It was originally made to only work with the Cycle plugin. So much so that it called it for you and you passed the options for the Cycle plugin as an option of the Image Loader plugin.

Dumb idea. 0 Extensibility? What was I thinking?

As I started turning the code into a plugin this just didn’t make sense. Why force myself into only one path? What if I want to use this for something other than this one slideshow plugin.

Now you provide a callback function where you can launch your own function. Here’s how it works.

	$("#slideShow").imageLoader({
	   images: ['images/image1.jpg'
		  ,'images/image2.jpg'
		  ,'images/image3.jpg'
		  ,'images/image4.jpg'
		  ,'images/image5.jpg']
	}, function(){
	   $('#slideShow').cycle();
	});

I’m quite happy I noticed this. And I don’t think I would have if I didn’t take this from the approach that someone else might find this useful. Even if no one else does it’ll save me time in the future.

2. As always it takes more than just code to make something. Once I had my plugin at a point I felt was release worthy I then needed to do a few things:

• Give it a name! One that isn’t taken already… (hopefully)
• Setup a page on jQuery’s plugin page.
• Make a support and example page.
• Package the whole thing up into a release.
• Make a Twitter post about it.
• Make a Blog post about it.

Really the only required things were the 1st, 3rd and 4th. But if I was going to do them I may as well do this the right way.

The name isn’t very creative, but I just wanted something that said what it did and wasn’t taken. I renamed it twice.

The project setup on jQuery is pretty quick and painless. It’s also customizable enough where you could honestly use it as your entire site. But since this is something I wrote I wanted people to see where it came from. Thus my own site as well. Anyhow you can’t do an example on their site.

Packaging it up was easy, but still I wanted this to be done nice so:

• Pick a license. (I went with MIT)
• Make a Read Me file.
• Run YUI Compressor to make a minify version.
• Clean up the style sheet and javascript a bit more.

3. Deciding when I had something release worthy was interesting. I already have two other features I’d like to add. Really I could have added these, but then I wouldn’t have a released plugin right now. And I would rather release often honestly. It’s not like this is for the iPhone and I won’t be able to get a release through the app store quickly. So this was great practice to start “releasing early”. Maybe I’ll release 1.1 tonight and practice “release often”.

4. Finally, I have the code on my computer here at home. No source control at all. Something I’ve been wanting to stop myself from doing lately. So I’m going to give GitHub a shot. Something else I’ve been wanting to do lately.

Like I said, this started as just an exercise to see more about jQuery plugins. But really it turned into an exercise to look at how I write software, a quick practice on getting something out the door and introduced me to GitHub too.

Tags: Image Loader, jQuery, Multiple Image Preloader, Plugin