Stretchy Slideshow & HTML5 Slideshow

[rterry126]

If anyone is interested in using both the Flash based stretchy slideshow for browsers that support Flash AND the Smugmug HTML5 slideshow for iPhone and iPads (seemingly the best of both) I've implemented a "workaround" on my account/website that appears to work.

In the interest of full disclosure, I've only tested it on the Apple SDK iPhone/iPad simulator since I don't have access to either. Therefore I would prefer that someone test it (www.robertterryphotography.com) on an actual iPhone/iPad prior to me posting the steps here (to save everyone much grief).

Also since it is a bit of a workaround, I'm not sure how efficient it is and am confident that someone with better coding skills than I can clean it up even more.

Robert

www.robertterryphotography.com

[jfriend]

FYI, I'm working on building this capability into the stretchy slideshow (though I'll probably do it differently than you). Nice job. I also want a phone optimized slideshow for Android phones which Smugmug hasn't done yet.

[thaKing]

did a quick try on iphone running iOS 4.1 and it appeared to work just fine...good job...

[rterry126]

@jfriend - I'm sure your implementation will be much more elegant than mine. This is more/less a temporary solution until something better comes along.


1) Ensure that you have the stretchy slideshow installed, running correctly, and customized prior to attempting. It will make troubleshooting much simpler. Depending on how you have it set up, your iPhone/iPad should either show the missing Flash graphic OR a single image (if you have No Flash set up to display single image in SS).

2)Activate the built in Smugmug slideshow. You'll now have two slideshows that display on most web browsers; we'll fix that shortly. Settings aren't really too critical, here is what I used:

http://rterry.no-ip.info:1111/smugmug10.jpg

3) The background color of the built in slideshow was a light grey and didn't match my homepage background so I needed to tweak it. In the Advanced Customization>CSS section of your control panel, you can fix this with the following code:

#slideshowBox {
background-color:#xxxxxx;
}

where xxxxxx is the 6 digit hex code for the color you are trying to match. After you are happy with the color then you will need to hide this slideshow using the same CSS section. Here is what mine looks like:

#slideshowBox {
background-color:#0C0C0C; display:none;
}

The only difference should be in each person's background color.

4) In the Bottom Javascript (Advanced Customization) add the following code at the very end:

if ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPad/i)) || (navigator.userAgent.match(/iPod/i))) {
document.getElementById("slideshowBox").style.display = "block";
document.getElementById("bioBox").style.display = "none"; // probably not needed
}

This will "unhide" the HTML5 slideshow when the iPHone/pad is used. ( Javascripters: this is probably the weak link as it depends on the page having the required elements, that is why it is at the end. Tried putting it in the window.onload but it wouldn't work.)

5) On your homepage, in the "Bio" section, where the SS code is, change this line:

InsertStretchySlideshow(ssConfig);

to this:

if ((navigator.userAgent.indexOf('iPhone') != -1) || (navigator.userAgent.indexOf('iPod') != -1) || (navigator.userAgent.indexOf('iPad') != -1)) {

// do nothing and let default slideshow function and redirect
}
else {
InsertStretchySlideshow(ssConfig);
}

Logic is as follows: The HTML5 slideshow is always loaded but initially hidden. If the user goes to homepage on an iPhone/pad, the SS is never activated, letting the built-in HTML5 code redirect or do whatever it does to run it on the iDevice. Once it gets to the iDevice then the javascript we added displays it.
If the user loads page on a Flash enabled browser, then SS loads normally. Unfortunately the code for the HTML5 probably also runs, but it isn't displayed (HTML5 slideshow).

Notes: a) Efficiency wise this is probably not the best solution as we are loading both slideshows on Flash based devices but not displaying the Smugmug one. Don't know what effect this has on loading time/bandwidth.
b) I use the same pool of images for both slideshows, however one could use a different pool for each; perhaps a smaller for the iDevices. This might also help with a).
c) Even though I have "random" set for the options on my built in slideshow (HTML5), I get the same images in the same order. Don't know if that's an inherent problem with it or an effect of this workaround.
d) Once you've set the built in slideshow to display:none, it makes it hard to edit since it now won't show up on your homepage when you're logged in (assuming you're not on an iDevice). A couple of workarounds: go back to the CSS, set display:block, make changes, go to CSS and set display:none OR if you have a browser (like Safari) that lets you set the "user agent" (essentially what type of browser it tells the website it is), change this to an "iDevice". I've only tested this with Safari but it then displays the slideshow settings so that I can tweak them.