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:
<script type="text/javascript" src="jquery.flash.minified.js"></script>
<script type="text/javascript" src="cookie.js"></script>
<script type="text/javascript">
$(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
</script>
<style type="text/css">
<!–
–>
</style>
<img id="headerimg" src="swap-pic.jpg" width="332" height="297" rel="intro.swf:332:297">
</div>
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
Technorati Tags: jquery
One Comment
thanks, it is very good for me, I now surfing solution for jquery to do the flash in the showcase.