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"
data="http://img515.imageshack.us/slideshow/smilplayer.swf"
width="400" height="326" id="VideoPlayback">
<param name="movie"
value="id=img515/8742/1182697433ltj.smil"/>
<param name="allowScriptAcess" value="sameDomian" />
<param name="FlashVars" value="playerMode=embedded" />
<param name="FlashVars" value="id=img515/8742/1182697433ltj.smil"/>
</object>
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…
UPDATE:
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 2.0.0.1. But IE is being terribly tiresome. Back to the drawing board later?
