Alternate JavaScript Slideshow for SlideshowPro

Published Monday, March 12, 2007 @ 2:12 pm • 0 Responses

For the unenlightened, SlideshowPro (SP) is a Flash-based slideshow-authoring system that delivers full-featured, high-end, Flash-based slideshows. Websites featuring SP slideshows present content in sophisticated fashion, inspiring users with elegant captions, beautiful transitions, and intuitive navigation.

However, many visitors are unable to experience SP slideshows because they lack the requisite Flash support. SlideshowPro-based slideshows currently require Flash 7 or better to function. And, although Flash 7 is quite common, it is far from ubiquitous. In the "worst-case" scenario, Flash-challenged visitors will see a broken webpage or missing content. Unfortunately, the typical "best-case" scenario is not much better, as non-Flash users typically will see a single, static image, which is generally served via something similar to:

<object classid="clsid...">
 <param name="movie..." />
 <embed src="http://domain.tld/..." />
 ...
 <img src="http://domain.tld/path/to/alt/image.jpg" alt="alternate image served for non-Flash browsers" />
 ...
</object>

..which is better than missing content, or even worse, a broken webpage. Even so, if an unusable slideshow is intended to deliver an otherwise important portion of your website, visitors will be missing out on everything that your site has to offer. You could, I suppose, serve slideshow content to non-Flashians by extrapolating the previous method:

<object classid="clsid...">
 <param name="movie..." />
 <embed src="http://domain.tld/..." />
 ...
 <img src="http://domain.tld/path/to/alt/image-01.jpg" alt="first slideshow image served for non-Flash browsers" />
 <img src="http://domain.tld/path/to/alt/image-02.jpg" alt="second slideshow image served for non-Flash browsers" />
 <img src="http://domain.tld/path/to/alt/image-03.jpg" alt="third slideshow image served for non-Flash browsers" />
 ...
</object>

..this method works when the site design is able to accommodate display of the entire set of images, which may consume considerable space. If the number or size of the images is relatively large, displaying them all at once may overwhelm your visitors and their bandwidth. Still, not the best solution for most sites..

Word up

Fortunately, there is a better way to provide alternate content for non-Flash users. This article explains how to provide an alternate JavaScript slideshow for browsers that do not support Flash-based slideshows, such as those produced via SlideshowPro. Further, browsers that do support Flash but do not have the required version (currently Flash 7 for SlideshowPro) are delivered your choice of either JavaScript or retro-Flash content. The JavaScript slideshow may not be as flashy (pun intended) or full-featured as those created by SlideshowPro, but it is integrated seamlessly and ensures visitor exposure to crucial content.

Before we begin, let’s summarize how our method responds to various browser configurations:

Browser supports the required version of Flash

Excellent. This is the ideal situation. Your Flash-based slideshow will be displayed as intended.

Browser supports Flash, but has not upgraded to the required version

Okay. In this situation, you could serve either a JavaScript slideshow or a retro-Flash slideshow (i.e., a Flash slideshow that requires a lesser version of Flash to function).

Browser does not support Flash, but does support JavaScript

Not bad. Non-Flash users will experience an alternate, JavaScript-based slideshow. The JavaScript slideshow is seamlessly integrated, covertly replacing the Flash slideshow while providing identical content. User’s won’t know what they’re missing.

Browser does not support JavaScript, but does support Flash

For Flash-based slideshows that do not require JavaScript (such as those created via SlideshowPro), the browser will display the slideshow as intended, assuming sufficient Flash version. When the version of Flash is insufficient, non-Flash users will see either retro-Flash content, an animated-gif slideshow, or static image content, depending on your preference.

Browser supports neither JavaScript nor Flash

Worst case. Even so, all hope is not lost. In this situation, visitors will see either an animated-gif slideshow or static image content. Still better than broken pages and missing content.

Code up

As we proceed, we will see how this method achieves its robust coverage of the various browser configurations. For now, let’s prepare the three main components of our strategy:

SlideshowPro (or other Flash-based slideshow)

As this article is aimed at users of SlideshowPro (SP), it is assumed that a working SP slideshow has been already implemented online. To purchase a copy of SlideshowPro, check out the official SlideshowPro website. Alternately, this method may be extrapolated to cover virtually any Flash slideshow, so get one up and running and let’s go.

An alternate JavaScript Slideshow

Our method employs the excellent JavaScript Slideshow provided by ricocheting.com. In our opinion, it is currently one of the best available, and may be downloaded here. However, this method will work with virtually any JavaScript slideshow, so feel free to implement your own.

Flash Detect 3 JavaScript

Ryan Parman and mjac provide an incredibly useful Flash-detection script, Flash Detect 3. This script will enable us to detect and target just about any version of Flash for customized content. An absolute must-have. Download it here.

Link up

After reading up on and downloading the Flash Detect 3 and JavaScript Slideshow scripts, place them both into a directory and link to them via the following code in the head of your document (remember to edit the paths and filenames to match your own):

<script src="http://domain.tld/path/to/alt-slideshow.js" type="text/javascript"></script>
<script src="http://domain.tld/path/to/flash-detect.js" type="text/javascript"></script>

The alternate slideshow script itself requires some configuring in order to function properly. Basically, you will need to link up your images and edit a few variables (see the script’s home page for complete details). The Flash Detect 3 script is ready to go and requires no modification. Make sure that everything is configured, uploaded, linked, and ready to go. Also make sure that your SP slideshow is up and running as intended.

Shoot up

Now that everything is in place behind the scenes, it is time to tie everything together within the target webpage. Locate the region of (X)HTML code into which you wish to add the SP slideshow, and add the following:

<script type="text/javascript">
<!--//--><![CDATA[//><!--
if (flash.ver[7]) {
   document.write(
      '<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="300" height="225" id="slideshow" align="middle">' +
      '<param name="movie" value="http://domain.tld/path/to/slideshow.swf" />' +
      '<param name="allowScriptAccess" value="sameDomain" />' +
      '<param name="quality" value="high" />' +
      '<param name="bgcolor" value="#000" />' +
      '<param name="base" value="." />' +
      '<embed src="http://domain.tld/path/to/slideshow.swf" base="." quality="high" bgcolor="#000" width="300" height="225" name="slideshow" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />' +
      '<\/object>'
   );
} else if (flash.installed) {
   document.write(
      '<form id="slideshow" name="slideshow" action="null"><a href="#" onmouseover="this.href=theimage[i][1];return false">' + 
      '<img name="imgslide" id="imgslide" src="' + theimage[0][0] + '" border="0" alt="JavaScript Slideshow" />' + 
      '<\/a><\/form>'
   );
} else {
   document.write(
      '<form id="slideshow" name="slideshow" action="null"><a href="#" onmouseover="this.href=theimage[i][1];return false">' + 
      '<img name="imgslide" id="imgslide" src="' + theimage[0][0] + '" border="0" alt="JavaScript Slideshow" />' + 
      '<\/a><\/form>'
   );
}
//--><!]]>
</script>

That is the money shot, right there. With that in place, you will now want to edit a few things according to your specific setup:

• In the third-line "if statement", we have specified the requisite version of Flash for SP slideshows. If you are using a different slideshow, you may want to change the version number from "7" to something more appropriate.
• Within the <object> tag, edit the path to your SP slideshow. Also edit the width, height, and align attributes, if necessary.
• Enclosed within the <object> tags, edit the various <param> elements according to your specific configuration. For SlideshowPro users, replace the values of these elements with those originally produced for your SP slideshow.
• Make sure that the attribute values of the <embed> tag match those of the <object> and <param> tags. For more information regarding object parameters and embed tags, check out our article, Embed Flash and Video via the object Tag.

After you have made the necessary adjustments, upload the changes, refresh your browser, and check for functionality. Depending on your browser preferences, you will see either the Flash slideshow (if both JavaScript and Flash support are detected), the JavaScript slideshow (if JavaScript support is detected, but Flash support is not), or nothing at all (if JavaScript support is not detected, regardless of Flash support). So what about users without JavaScript? Read on..

Back up

Finally, we need to provide support for browsers without JavaScript support. At the very least, we could throw down a few images for non-JavaScriptians, but it would be better to include the Flash movie instead. Then, if the browser lacks support for both JavaScript and Flash, we serve any number of alternate images. Place this code directly beneath the previous code in your webpage:

<noscript>
   <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="300" height="225" id="slideshow" align="middle" 
    codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0">
   ...
   <param name="movie" value="http://domain.tld/path/to/slideshow.swf" />
   <param name="allowScriptAccess" value="sameDomain" />
   <param name="quality" value="high" />
   <param name="bgcolor" value="#000" />
   <param name="base" value="." />
   ...
   <embed src="http://domain.tld/path/to/slideshow.swf" base="." quality="high" 
    bgcolor="#000" width="300" height="225" name="slideshow" align="middle" 
    allowScriptAccess="sameDomain" type="application/x-shockwave-flash" 
    pluginspage="http://www.macromedia.com/go/getflashplayer" />
   ...
   <img src="http://domain.tld/path/to/alt/image-01.jpg" alt="first slideshow image served for non-Flash browsers" />
   <img src="http://domain.tld/path/to/alt/image-02.jpg" alt="second slideshow image served for non-Flash browsers" />
   <img src="http://domain.tld/path/to/alt/image-03.jpg" alt="third slideshow image served for non-Flash browsers" />
   ...
   </object>
</noscript>

Edit the object, param, and embed tags such that everything matches all over the place. This is the same block of code that is written by JavaScript when supported, so make sure their attribute values match accordingly. Also, remove the ellipses and replace with additional images and/or parameters. Remember to edit the paths for your images as well.

Finally, if you are absolutely determined to provide your images via slideshow, crack open your favorite ImageReady program and throw down a double-tuf animated-gif version of your content. Then simply replace the series of images listed in the <noscript> code above with something like:

<img src="http://domain.tld/path/to/alt/slideshow.gif" alt="gif slideshow" />

Wrap up

At this point, assuming everything is working, we are finished. To see the variously presented alternate content, modify your browser settings to disable either Flash, JavaScript, or both. As you investigate the functionality of this method, you will no doubt discover need to style elements (via CSS), tweak properties (via XHTML), and modify preferences (via JavaScript). Of course, taking the time to tighten everything up will be well worth your efforts, as your site will be well-equipped to deliver content in a medium optimally suited to browse potential. Cheers!

← Previous post • Next post →

« Go Back via JavaScript and PHP • Perishable Press Redirection Lounge »