What I did to make sure my slideshow's content was still accessible.
You simply create an element to hold the slideshow's content and then
push the content from the slides into arrays. You then remove the
element that held the content and then create the slideshow object.
HTML
<div id="mySlideshow" class="jdSlideshow">
<ul>
<li><a href="/path/to/resource" title="Description"><img
src="/path/to/img" alt="Heading" /></a></li>
<li><a href="/path/to/resource2" title="Description2"><img
src="/path/to/img2" alt="Heading2" /></a></li>
</ul>
</div>
Javascript. I prefer to place the javascript in a file.
Window.onDomReady(startUp);
function startUp() {
/* slideshow */
var mySlideData = new Array();
var countArticle = 0;
$$('#mySlideshow ul li').each(function(el) {
var tmpA = el.getElement('a');
var tmpIMG = el.getElement('img');
mySlideData[countArticle++] = new Array(
tmpIMG.src,
tmpA.href,
tmpIMG.alt,
tmpA.title
);
});
if (countArticle != 0) {
$$('#mySlideshow ul').remove(); // remove the element holding the
content
var slideshow = new timedSlideShow($('mySlideshow'), mySlideData);
// creates the slideshow
}
}
This way you still have your great content for all!
|
