Slideshows
Picasa
Picasa is a downloadable program from Google used for editing pictures, with a companion web site called Picasa Web Albums. To make a slideshow create an "Album" on your website. Press "Link to this album" in the right sidebar, then choose "Embed Slideshow". See details on embedding.
Picasa isn't very configurable, loads slowly, and can't loop.
Slideshow 2!
A great slideshow with many customizations, including fades, labels, thumbnails, and the Ken Burns effect, with many great customization examples.
- Download the Slideshow 2! directory from the Slideshow.zip file at Google Code.
- Upload the directory Slideshow 2! to your host.
- Add the following code in your HTML head section.
- Add the following code where you want to the slide show to appear in your HTML body section. (Note: style="margin-left: 0px" is not in the original example.)
<script type="text/javascript" src="Slideshow 2!/js/mootools.js"></script>
<script type="text/javascript" src="Slideshow 2!/js/slideshow.js"></script>
<script type="text/javascript">
//<![CDATA[
window.addEvent('domready', function(){
var data = {
'1.jpg': { caption: 'Volcano Asencion in Ometepe, Nicaragua.' },
'2.jpg': { caption: 'A Ceibu tree.' },
'3.jpg': { caption: 'The view from Volcano Maderas.' },
'4.jpg': { caption: 'Beer and ice cream.' }
};
var myShow = new Slideshow('show', data, {center: false, controller: false, height: 300, hu: 'Slideshow 2!/images/', thumbnails: false, width: 400});
});
//]]>
</script>
<img src="Slideshow 2!/images/1.jpg" alt="Volcano Asencion in Ometepe, Nicaragua." />
</div>
TINY Slideshow
This Javascript slideshow has a very light Javascript footprint and can be customized via CSS. It can display both images and text.
This slideshow is a bit tricky to incorporate and requires a bit of CSS knowledge and attention to the example. In particular, the example CSS uses the common "wrapper" and "content" class identifiers. If you already have a site that uses these names you'll need to deal with the collision.
