Flash-replacement slideshow with Javascript & XHTML

Posted on August 01, 2005

Here's an example of a flash-replacement slideshow using XHTML and Javascript/DOM. (IE uses innerHTML. See below)

When javascript is deactivated, the user sees a simple XHTML page with all the images and captions underneath one-another. If javascript is activated, the function bsn_showSlideshow is called. The flash version has already been checked by quirksmode's flash checker. If flash >6 is available, the div id="wrapper" is emptied and a flash object/embed is inserted using a list apart's "flash satay" method.

Two variables are passed to the inserted swf:

  • xmlfile - the name of the containing xhtml file
  • divID - the ID of the div that contains the images and captions

The swf then loads it's own containing XHTML file into an XML object, looks for the divID node, and parses the images into an array of objects. It then loads the images and creates the buttons. (Here's the actionscript code.)

Apart from the advantages of the "unobtrusive" use of flash and javascript, the images and captions can be very easily updated in an "wysiwyg" editor such as Dreamweaver. There's no need to edit the alternative content.

It works perfectly in Firefox (Mac & PC) and Safari, but Explorer seems to have problems creating the flash object with DOM. innerHTML is no problem, but I would like to get it working with DOM if at all possible. Comments and ideas are appreciated!

[UPDATE 2005-08-02] Put in some browser detection so that IE can use the innerHTML.



Comments (11)

barry said

tim this is insane. You keep coming up with these amazing javascript hacks..... Im still working on a different version of the javascript footnotes called 'stretchnotes'...

I didnt even know that oyu co do this:

// create flash satay element
var obj = document.createElement("object");
obj.type = "application/x-shockwave-flash";

Awesome tim keep up the amazing work man.

Posted by: barry at August 1, 2005 07:20 PM .

Lisa McMillan said

Ok. This is fantastic. Nice workup and concept development man! I'll be checking this thread out for your (and everyones) updates to the IE bug... *shaking fist at IE*

I'm a total Javascript loser. jfyi. Is this something that could be expanded to skip through the slides automatically without user input?

Seriously. I love your blog.

Posted by: Lisa McMillan at August 2, 2005 01:26 AM .

timg said

Thanks for the compliments!
@barry
Cheers! looking forward to seeing those 'stretchnotes'. Sounds interesting already.

@lisa
The flash version could easily be modified to swap slides at a particular interval. It's possible to swap the images in the XHTML version too, but I've intentionally kept it free of scripting because it's the lowest common denominator version. A lot of mobile clients don't support javascript (apparently). The advent of mobile internet is the practical motivation for all this backwards-compatibility.

Posted by: timg at August 2, 2005 08:46 AM .

Lisa McMillan said

Hey agagin Tim - Thanks again for the information and the work you did on this post/solution. It's great! I'm learning a little javascript - maybe I can figure out a way to add the scripting and have another option for the mobile users... :-)

Posted by: Lisa McMillan at August 8, 2005 04:57 AM .

Harvey Ramer said

I like the concept and took a quick look at the code. I'm unclear about how this accomodates captions. Can you explain?

Posted by: Harvey Ramer at March 1, 2006 10:14 AM .

bsn said

@Harvey
If you roll over the photos you will see the caption in the top left-hand corner of the image. Easy to miss, I know.

I just noticed that I forgot to link the .fla file.
http://www.brandspankingnew.net/specials/xhtml_slideshow/xhtml_slideshow.zip

All changes to the flash layout have to be made in the flash file. The AS code is a bit ropey because it's based on a very old flash slideshow I once made.

Posted by: bsn at March 1, 2006 10:48 AM .

jakob said

hi!

is there a way to implement prev and next button?

(i know nothing about flash)


j

Posted by: jakob at June 28, 2006 10:38 PM .

Mike said

Is there a way to add HTML links to the images or caption fields? I really would like to implement this slideshow for a website I'm building.

Posted by: Mike at October 2, 2006 09:23 PM .

yaniv danan said

here is a link to a code that actually works in IE:

http://chattyfig.figleaf.com/pipermail/flashcoders/2002-November/052518.html

Posted by: yaniv danan at October 26, 2006 11:34 AM .

Flash XHTML Guy said

You can also try this example for inclusion fo Flash into XHTML:
http://www.ambience.sk/flash-valid.htm

Posted by: Flash XHTML Guy at October 3, 2007 01:45 PM .

Tony said

This is exactly what I have been looking for! Is there Anyway to auto play this? If this is possible your just awesome.

Posted by: Tony at November 8, 2007 03:33 PM .