rob blog.

Just another WordPress weblog

jQuery Plugin: Random Image on Page Load

I’m working on a project where we wanted to have a different central image appear on page load. So I made this plugin for anyone looking to implement the same functionality

How it works:

First, in your html markup you need to create an img tag and assign it an id or class:

<img class="shuffle" src="" alt="">

You probably want to leave the source and alt blank. You could load an image there by default, just in case your random image has some sort of problem loading — but I would advise against this. I say this because, if you have a ‘just-in-case’ image that loads by default, it will halfway load on every page load before one of your random images pops up. And that just looks weird.

In the plugin javascript file, you need to place your images in the array like so:

...
	//you can change these defaults to your own preferences.
	path: 'images/', //change this to the path of your images
	myImages: ['image1.jpg', 'image2.jpg', 'image3.jpg', image4.jpg', 'image5.jpg' ] //put image names in this bracket. ex: 'harold.jpg', 'maude.jpg', 'etc'

...

The plugin works by changing the src and alt attributes to your image of choice randomly. In the plugin javascript file you can see that it’s set to use the path “images/” by default:

	path: 'images/', //change this to the path of your images
	

So you can change the path here or you can do it when you call the randomImage() function in your header or wherever it is that you keep your js.

Example:

	$('.shuffle').randomImage();
	//or to change the default path
	$('.shuffle').randomImage({path: 'myOtherPath/'});
	

Get the Goods:

View Demo
Get Plugin

Tags: , , ,

This entry was posted on Sunday, March 14th, 2010 at 9:32 pm and is filed under Blog. You can follow any responses to this entry through the RSS 2.0 feed. Responses are currently closed, but you can trackback from your own site.

6 Responses to “jQuery Plugin: Random Image on Page Load”

  1. Jamie Says:

    July 22nd, 2010 at 12:48 pm

    Just wanted to show my appreciation with a thank you. You saved me some time and effort re-creating the wheel. This simple little plug-in just works. Thanks!

  2. Jamie Says:

    July 29th, 2010 at 11:38 am

    Just wanted to leave a note that this fails in ie7 (go figure). I can’t figure out what it’s vomiting on :(

  3. Rob Walsh Says:

    July 29th, 2010 at 6:14 pm

    It should work in IE7 now. Sorry about that - there was an extra comma in there.

    Fixed on demo page and i downloadable script.

  4. Carl Says:

    August 12th, 2010 at 12:47 am

    Thank you!

  5. heath Says:

    September 16th, 2010 at 10:20 am

    Hi,

    This is an awesome little plugin - thank you so much for developing it!

    I kept getting a little blue square with a question mark in it in Safari, so I added a 1px x 1px image like so:

    And it went away! Just wanted to share.

  6. David Hall Says:

    December 27th, 2010 at 3:54 pm

    Thanks so much! By far the easiest to understand.