Victory is (Almost) Mine! (Standards Compliant Slideshow via ImageShack)

I recently finished working with a local dog group on a website redesign. Intially, I was particularly proud to recreate what was a table-based layout in xhtml and css. Later, the group decided they wanted to make some significant changes and I taught my wife enough Fireworks and Dreamweaver for her to redesign the color scheme. We worked together and remain married. Go us. But that's not today's victory.

From the beginning of the project the group wanted some kind of photo gallery for the site. The problem: how do I create a standards-compliant site that group members can easily update? My first idea was to use Flash to create a gallery. But this didn't seem like a good option, since images need to be re-sized before they are added to a collection, and every update means going in and editing the flash file. No...no..no. I also thought about using Javascript (I've done this before for Purdue's GradSEA), but this technique isn't standards-compliant.

Reading a Mashable article on image editing resources yesterday, I came across a link to ImageShack--a photo hosting service that allows users to easily create slideshows and pumps out code to embed the shows on other websites (kind of like the libraryThing widget Michael uses on Wishydig, but using Flash rather than Java). The problem? Embeds are banned by the w3c--use the easy widget, lose your validation. All seemed lost. Especially since the classic fix for embed, McLellan's satay method, works best when you can create a container moive. This wasn't the case. Then I remembered (via del.icio.us) Elizabeth Castro's article on how McLellan's technique can be used on Google Video and YouTube movies without the satay...

When you complete a slide show with ImageShack (and you don't have to register to create a slideshow, but you do have to register to be able to edit a show), it will produce this code:

<embed src="http://img515.imageshack.us/slideshow/smilplayer.swf" width="426" height="320" name="smilplayer" id="smilplayer" bgcolor="FFFFFF" menu="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=img515/8742/1182697433ltj.smil"/>

Following along with McLellan and Castor, we want to transform this embed into an object:

<object type="application/x-shockwave-flash"
width="400" height="326" id="VideoPlayback">
<param name="movie"
<param name="allowScriptAcess" value="sameDomian" />
<param name="FlashVars" value="playerMode=embedded" />
<param name="FlashVars" value="id=img515/8742/1182697433ltj.smil"/>

The key to getting this puppy working is to include the unique id as a FlashVars parameter (the final line of the code). Google and Youtube supply each movie with its own URL, ImageShack doesn't--rather, it assigns each slideshow a unique id in its database. So, bottom line, you have to include this id to get the show rolling. The only line I am unsure of is the "allowScriptAcess" line--it was in Castor's code, but I'm not sure if its necessary. I tried removing it and the slideshow still played in Safari, but I'm not sure if it is an IE command (with the satay method, IE doesn't like auto-starting... if anyone has IE, let me know if this is working, I promise not to chastise you too much for using IE).

Victory is mine! And, best of all, ImageShack is an awesome 2.0 app--it automatically resizes images, allows for easy captions, allows users to re-order images, determine background color, tag presentations, import images from Flickr or other URL's (as well as direct upload), choose transition effects, add music (please don't), and make shows public or private. And now, thanks to A List Apart and some wranglin', it can be standards-compliant. Cool.

Here's the final, standards-compliant code in action:
Go to ImageShack® to Create your own Slideshow

UPDATE: Things aren't going quite so smoothly with my actual dog park moive. Yesterday, while working on the slideshow above, I noticed that the ImageShack server was reacting really slowly at times. I finished a sample dog park slide show last night, and it works fine through the standard embed method, my object method is running into problems:
Go to ImageShack® to Create your own Slideshow

I have no idea why this movie isn't loading....

UPDATE: I am dumb. Problem solved. Already sent "I'm an idiot" email to ImageShack (see my comment... before I delete it). Now I have to write this post up into something a bit more constructive and submit it to imageshack's tutorial contest...


Apparently the video is only working in Safari. I'm going to play with it this evening. If any visitors are looking at this post, can you tell me 1) what browser you are using [IE 6, Firefox 1.5 etc.] and 2) whether you see two movies above. Thanks.

UPDATE: O.k., its working in Firefox But IE is being terribly tiresome. Back to the drawing board later?


Insignificant Wrangler said...

I just emailed ImageShack's customer service the following message:

I teach standards-compliant web design at Purdue University and am interested in incorporating your site into my images unit. Satudray, I converted your embed code (not w3c compliant) into object code (w3c compliant) and everything worked fine.

Yesterday I did the same thing, but this time it is not working. The two videos (operative and non-operative) are posted to my blog:


While I know this might fall outside your usual support parameters, I will introduce this service to instructors next semester if I can get the compliant code to work consistently (also, at this point, I'm ready to pull my hair out from frustration as to why the second movie isn't playing).

One last thing: the two movies are from two different accounts. The first (working) movie is from my personal account, "insignificantwran," the second, non-operative movie is from the account I am emailing you from (dpaglweb@yahoo.com). As far as I can tell, the two accounts have the same settings.

Any assitance would be greatly appreicated,

Marc C. Santos

Kalina said...

I always love making my pages w3c compliant, so I was excited that your code would help me validate my amazon slideshow widget, which uses this same flash code, but I can't get it to work with your code...