Flashembed and jQuery

Flashembed demo 2 / 6 : 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:

HTML Setup

Our HTML setup is plain and simple:

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

JavaScript code

All those clocks were installed with this one jQuery call:

<script>
$(function() {
	$("div.clock").flashembed("/swf/clock.swf");
});
</script>

Those clocks were laid side-by-side using CSS. You can find a standalone example of this here.

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 a quite popular SIFR methodology to replace the header text with Flash to provide a smoother typographical experience. We do not encourage to use 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)

HTML code

We have normal

<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>

JavaScript code

The code loops through the

<script>
// perform this function after the page is scriptable
$(function() {

	// 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, "/swf/itc_century.swf", {
			txt: $(this).html(),
			css: '* { color: #666666; } a {color: #007766; text-decoration:underline}'
		});

	});
});
</script>

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