Using jQuery to Show Flash on First Page Load in a Session and Show an Image on Successive Loads

This may be the longest title of a blog post I've ever written. Anyway, a friend of mine is designing a site and wants to show a Flash header/menu on the first load of a page within a site but then show an image on successive page loads. This is a nice balance between Flash and images. I told him jQuery should let me do this easily. Luckily, I was right!

First, the code:

	
	
	
	$(document).ready(function(){

		// Rename headerimg to be the id of your image to show when flash is hidden
		var flashImg = $("#headerimg");
		// OPTIONAL: Rename the name of the session cookie to use
		var cookieName = 'dontshowflash';
		// VERY OPTIONAL: Rename the value of the session cookie - any value will work
		var cookieValue = 1;

		if (!$.cookie(cookieName)) {

			// Get flash attribs from rel attrib of image
			var params = flashImg.attr('rel').split(':');
			var flaSrc = params[0];
			var flaWidth = params[1];
			var flaHeight = params[2];

			var imgParent = flashImg.parent(0);

			// Remove the image
			flashImg.remove();

			// Show the flash
			imgParent.flash({
				src: flaSrc,
				width: flaWidth,
				height: flaHeight
			}); // end .flash

			// Set a session cookie so it isn't shown again
			$.cookie(cookieName, cookieValue);
		}
	}); // end .ready
	
	
	
	

	

We use a couple jQuery plugins to make this easier:

This can be used as-is with no changes. If you change the id of the IMG you use, you’ll need to make one script change (see the code comments for more details). Other than that, the rest is all done in HTML. The rel attribute of the img element is used to store an array containing the Flash source file name, width, and height.

You can change the name of the cookie and the value stored if needed. If this code is used on multiple pages it would only show Flash on the first load of any page within the session. If you want to make it so that the first load of every page shows the Flash, you’ll need to use a unique cookie name for each page.

Here’s the demo

[tags]jquery[/tags]

One thought on “Using jQuery to Show Flash on First Page Load in a Session and Show an Image on Successive Loads

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s