JQuery FancyZoom and fixing the XHTML and Flash bug for Internet Explorer

In the beginning of May, we deployed the newly designed index page for pelotonics.com.

During the redesign process, we decided that we need a better tool to pop-up images to their full size, as well as be able to pop-up video’s for the customer interviews and an overview video from Troy about Pelotonics and our philosophy on group productivity. We found a JQuery version of FancyZoom where you can embed any HTML within the pop-up. Everything was working great! Until we decided to rewrite all of the HTML on our website to be XHTML.

Watch a Screencast of me finding a bug on the FancyZoom webpage (in IE) a code demo on how to fix it.

When you copy an embed code from YouTube or Vimeo, there’s an HTML tag in there “embed”. Here’s the base structure:


<object width="x" height="y">
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="movie" value="pathToMovie" />
<embed src="pathToMovie" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="x" height="y"></embed>
</object>


Though after doing some research (and trying to validate your website on W3C), you’ll realize that the “embed” tag isn’t recognized in XHTML. The way around this is to put a “data” attribute in the “object” tag, like this:


<object data="pathToMovie" width="x" height="y" type="application/x-shockwave-flash">
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="movie" value="pathToMovie" />
</object>


So, you test your movie in IE, Firefox, Chrome, etc., you run it through the W3C validation service, it works! Good job!!!

Now comes the fun part… you want to embed your movie in the FancyZoom pop-up. If you copy in your new XHTML code into the DIV tag for the FancyZoom pop-up, it should work in every browser BUT Internet Explorer. This is where I ran into a major road block. I searched Google, read the FancyZoom forums, and I couldn’t find anything! So I figured I would just roll up the sleeves and figure it out myself. Here’s what I found…

Internet Explorer doesn’t play well with the “data” attribute in the “object” tag. Though if you change “data” to “codebase” it works like a charm! The only problem now is your Flash object will only play in Internet Explorer. So you have to detect which browser the client is using to determine which object code to use. If it’s Internet Explorer, use the “codebase” attribute in the “object” tag. If it’s anything else, use the “data” attribute in the “object” tag.

Using this technique, you’ll be able to embed Flash objects into a FancyZoom pop-up.

Popularity: 33% [?]

Tweet This Post