- <div class="slideShow" id="slideShow1">
- <ul><li>Slide 1 title
- <ul><li>Slide 1 content</li></ul>
- </li></ul>
- <ul><li>Slide 2 title
- <ul><li>Slide 2 content</li></ul>
- </li></ul>
- ....
- </div>
I'm working on a slide show script in Mootools 1.2. ("Why?" you ask. Because I need one that (1) accommodates multiple independent slide shows on the same page, (2) shows HTML slides and/or images, (3) offers tabbed navigation as well as previous/next buttons, and (3) degrades nicely when JS is off. There are many that have one or two of these features, but I haven't found a single one that has all four of them. If you know of one, let me know!)
The HTML for the slide shows looks like this:
In initializing the slide shows, I need to hide all of the inner <ul> tags on a page, i.e. the "div.slideShow ul li ul"s (to borrow CSS's nomenclature), except for the first slide in in each slide show (on a page with more than one show). I'm assuming that I need to iterate through the slide shows:
- var slideShows = $$('.slideShow');
- slideShows.each(function(slideShow){
- ....
- });
and then, for each slide show, iterate through the "ul li ul"s, ignoring the first one and hiding all the rest. But I can't figure out how to grab all of the "div.slideShow ul li ul"s for a particular slide show. Also, once I have an array of slides for a given show, I need to iterate through them in such a way that I can do something different to the first
Any pointers would be much appreciated.


