Now that I am doing professional web layouts for clients, I find myself appreciating the quick, easy, and well-documented jQuery library. I just don’t have time to hassle with Dojo and its size, widgets I don’t need, and messy documentation.
Recently for one client I needed to use a flash sidebar. The image was a slowly rotating, “fanned picture” slideshow provided by my designer partner. This would be OK, except I really dislike all the tag soup of object embedding, especially on dozens of pages. Also, I wanted to make sure that the site wouldn’t look strange with Flash turned off. In that case, I wanted to use a simple freezeframe of the first slide from the image set.
Setup
- I put the flash files in media/images/pagename.swf
- I put the snapshots from the first slide in media/images/pagename.jpg
- I am loading jquery.js, and its jq-flash plugin in the header
Dead Simple Markup
I put in two lines of code. That way, even if javascript is turned on, the user will still get the jpg version.
<img class="flashout" src="media/flash/pagename.jpg" alt=""whatever"/>
<a class="flash w:320 h:420" href="media/flash/pagename.swf"></a>
jQuery makes it easy
In my site.js file, I disable the image and enable the flash with just a couple lines of simple code.
var SSS = {
flashInit : function() {
if (jQuery.fn.flash) {
$('a.flash').flash({ params: {wmode : "transparent", version : 7}})
.html("");
$('.flashout').hide();
}
}
};
$(function() { SSS.flashInit(); });
If that doesn’t look so simple, let me explain. First, I am making a toplevel namespace, “SSS” for my company name. In that, I put an init function. The init function says, “If we have a flash function available, then activate all objects with the class name “flash” on the page. Remove any innerhtml associated with the flash element. Lastly, hide anything with a “flashout” class name.
The wonderful, terse line ending the code is jQuery’s excellent command to “execute as soon as the domain object model is ready.” In most cases, this will be before the image even appears on the screen, so it will not even be noticed by the viewer.
[tags]flash,jquery,degradable,accessible,accessible js,javascript[/tags]
Related posts:
- Using Dojo for a simple show/hide toggle effect. Without a doubt, my favorite Javascript library is Dojo Toolkit....
About Bruce Kroeze
I’ve never seen classes defined like this: “w:320″ and “h:420″, can you explain this?
Opps, I see the reference to the plugin now. Sorry!
That wonderful terse line could be even more terse:
$(SSS.flashInit);
Try it and see!
On another note, why do you check for a flash object? In what situation could your script run where the flash object is not available – assuming you always include the plugin?
Cheers
The reason I check is because I wanted to put this script in the main site script, but not all pages have flash. To reduce wasted requests to the server, I don’t load jq-flash or swfobject on those pages.
I see, that makes sense. Personally I would tend to include those plugins even if not used just because I assume they are downloaded once and then drawn from cache on subsequent pages. Therefore there are no requests made to the server for those scripts. Unless of course the user never visits the page that you did want to use the scripts on, in which case the initial download is wasted. Am I missing something?
No, that’s reasonable. In this case, Flash is only used on the front page, so it is pretty likely many will never need it. Possibly over-optimized to even bother with it, but no big deal.
Okay it’s clear now. I certainly appreciate your meticulousness – I am the same, which is why I wanted to verify this. Thanks.
Where is the .flash function coming from? I didn’t yet find it in the jq.flash plugin. Thanks in advance for the info.