Pardon this post! I am posting this information online for personal references purposes. I may need to revisit this code at some point in the future, and if I post it here I will always know where to find it (trust me, it would disappear into the abyss if I tried storing it offline). So, although it is intended solely for myself, feel free to extract and use anything you like, as long as commented attribution remains. What we have here are two different methods for including a slideshow on a web page. The first method employs the techniques discussed in this article, while the second method skips the Flash and employs only the JavaScript portion of the slideshow. Here is some additional help with embedding Flash content, including slideshows, and JavaScript techniques.
Continue Reading
In our previous article, Alternate JavaScript Slideshow for SlideshowPro, we present an elaborate method for providing alternate content specifically for SlideshowPro. Although the method points toward a more generalized adaptation, its overall functional implementation remains focused on the presentation of slideshows.
This article explores the generalization of the previously defined method for providing alternate JavaScript content when Flash support is not detected. Using skyzyx.com’s excellent Flash-detection script, Flash Detect 3, we will outline a general approach for supporting the following browser configurations:
- Browser supports the required version of Flash
- Excellent. This is the ideal situation. Your Flash-based content will be displayed as intended.
- Browser supports Flash, but has not upgraded to the required version
- Okay. In this situation, you could serve either JavaScript content or retro-Flash content (i.e., Flash content that requires a lesser version of Flash). Detection is also provided for virtually any version of Flash, enabling delivery of multiple movie alternatives.
- Browser does not support Flash, but does support JavaScript
- Not bad. Non-Flash browsers will receive alternate JavaScript content. User’s won’t know what they’re missing.
- Browser does not support JavaScript, but does support Flash
- For Flash content that does not require JavaScript to function, the browser will display the Flash content as intended, assuming sufficient Flash version. When the version of Flash is insufficient, non-Flash users will see either retro-Flash content, animated gif content, 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 animated gif content, or static image content.
Continue Reading
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>
Continue Reading
To add Lightbox functionality to any single image:
- Add
rel="lightbox" to the anchor tag.
- Add a
title="" attribute to the anchor tag.
- Add an
alt="" attribute to the image tag.
To add Lightbox functionality to any series of images:
- Add
rel="lightbox[value]" to the anchor tag of each image.
- Add a
title="" attribute to the anchor tag of each image.
- Add an
alt="" attribute to the image tag of each image.
- Any set of pictures with the same
rel="lightbox[value]" will display with nav buttons.