Minislides - in-page slideshows with CSS and DOM (beta)
Minislides are a spin-off of a chapter I am writing for my JavaScript book to be published later this year by Apress entitled "Modern JavaScript using DOM and AJAX".
Minislides does the following:
In a browser with JavaScript you can click any of the small images and you will see a larger one below. Browsers without JavaScript just get the small images and open the big ones in the main browser window.
You can use as many of these slide shows as you want to in the page:
How to use Minislides
To use Minislides just embed the CSS file, minislides.js and DOMhelp.js in the head of your document:
<style type="text/css">
@import 'minislides.css';
</style>
<script type="text/javascript" src="DOMhelp.js"></script>
<script type="text/javascript" src="minislides.js"></script>This will turn every list of images in the document into a slide show. The lists need to be the following HTML:
<ul class="minislides">
<li>
<a href="thumbs/dog10.jpg">
<img src="minithumbs/dog10.jpg" alt="Dog using
the shade" />
</a>
</li>
<li>
<a href="thumbs/kittenflat.jpg">
<img src="minithumbs/kittenflat.jpg" alt="Ginger
and White Cat" />
</a>
</li>
[... ad nauseam ...]
</ul>They need a class called "minislides" and link a small picture to a large picture in each list item.
What Minislides does
Minislides takes each of these lists and adds a new list item with the class "photo" to the end of it. It then takes the first link, grabs the target and creates a new image inside this list item - effectively showing the first large image.
It then loops through all the links and makes them show their large images inside this newly created list item.