Simple, degradable Flash embedding using jQuery

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.

FOLLOW US ON: