HomeProgrammingSimple, degradable Flash embedding using jQuery

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.


  • 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}})

$(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.


I started out going to college for Business administration but soon found out that Coding would be a great way to have a sustainable career! I made coder's eye as my personal journey on learning how to code and sharing my Findings along the way. My vision with CE now is to be a way to help beginners that want to learn code but don't know where to start.


Sorry, the comment form is closed at this time.