Flashembed and jQuery

Embedding multiple Flash objects

Flashembed has support for jQuery. This means that it can work as both a standalone script and as a jQuery plugin. You can use jQuery selectors to select elements from the page and place Flash object inside them. In this example we will find three div elements with the class name "clock" and place a SWF-based clock inside them:

standalone demo

HTML Setup

Our HTML setup is plain and simple:

<div class="clock"></div>
<div class="clock"></div>
<div class="clock"></div>

HTML

JavaScript code

All those clocks were installed with this one jQuery call:

	$("div.clock").flashembed("/media/swf/global/clock.swf");

JavaScript

Those clocks were positioned side-by-side using CSS.

SIFR example

In this example, we show you how we can install multiple Flash objects with one call but each object is configured differently. We use the quite popular SIFR methodology to replace the header text with Flash to provide a smoother typographical experience. We do not encourage using this method because today's browsers render fonts much better than they used to. However, this is a great example that shows you how to use jQuery and flashembed together.

Savion Glover

Joseph Wiggan

Samuel Smith

Fred Astaire (See Wikipedia page)

standalone demo

HTML code

We have normal h3 tags and they have been given the class name "sifr". Non-Flash browsers will see these headers normally, but Flash-enabled browsers will see the headers with the Flash-based text which is fully anti-aliased.

<h3 class="sifr">Savion Glover</h3>
<h3 class="sifr">Joseph Wiggan</h3>
<h3 class="sifr">Samuel Smith</h3>
 
<!-- example of a nested A tag -->
<h3 class="sifr">
  Fred Astaire
  (See <a href="http://en.wikipedia.org/wiki/Fred_Astaire">Wikipedia page</a>)
</h3>

HTML

SIFR is a rather old school technique, but serves as a good flashembed example.

JavaScript code

The code loops through the h3 tags and places a Flash object inside each one. Each object is configured separately with the HTML code that is provided inside the header tag.

    // loop through all H3 headers with the class name "sifr"
    $("h3.sifr").each(function() {
    	/*
    	  place Flash object inside each tag and configure it with the
    	  replacement text and its style. external CSS has no effect
    	*/
    	flashembed(this, "/media/swf/global/itc_century.swf", {
    	    txt: $(this).html(),
    	    css: '* { color: #666666; } '+
                     'a {color: #007766; text-decoration:underline}'
    	});
    });

JavaScript

Additionally, there are some CSS settings to set dimensions for the h3 tags.