New! If you like Slideshow, please check out Calendar: a Javascript class that adds accessible and unobtrusive date-pickers to your form elements.
Slideshow is a javascript class to stream and animate the presentation of images on your website. Slideshow was originally written as a plugin for the Textpattern CMS in 2006, using the original Moo.fx javascript library. This new version has been re-written from the ground-up for Mootools, incorporating many developments and feature requests over the past year. Use the links below to see what new features are available in Slideshow and how it might enhance the presentation of images on your website.
Slideshow RC2 requires any Mootools 1.x release with Fx.Style, Fx.Styles, Fx.Elements and Element.Selectors. In addition, use of the Robert Penner easing transitions also requires FX.Transitions.
If you like Slideshow, also check out Calendar: a Javascript class that adds accessible and unobtrusive date-pickers to your form elements. Show your support by clicking the Digg button below!
Developing Slideshow takes a lot of blood, sweat and tears. If you would like to do something to encourage production, consider donating below. Donors always receive personal notice of new releases in addition to access to beta versions before the general public... and my gratitude!
Using Slideshow requires at the very least knowledge of XHTML and CSS and some experience using Javascript in web pages. If you meet those requirements first make sure you have downloaded Mootools with the components listed above. Then follow the instructions below to begin using Slideshow!
Link the slideshow.js javascript file from within the head of your HTML document. Be sure to link slideshow.js after mootools.js in the order they appear. Note remember to adjust the src to reflect the location of the javascripts on your website.
<head>
...
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript" src="slideshow.js"></script>
</head>
Slideshow expects an HTML image <img> wrapped by a block element, such as a <div>. Following is an example of how this might appear in your HTML document:
<div id="my_slideshow" class="slideshow">
<img src="images/1.jpg" alt="A picture" width="400" height="300" />
</div>
You must pass the wrapper element to the Slideshow class on initialization. You can initialize the Slideshow from within the head of your HTML document:
<head>
...
<script type="text/javascript">
window.onload = function() { myShow = new Slideshow('my_slideshow', {hu: 'images/', images: ['1.jpg','2.jpg','3.jpg']}); }
</script>
</head>
...or from within the HTML body itself after the image and wrapper elements:
<div id="my_slideshow" class="slideshow">
<img src="images/1.jpg" alt="A picture" width="400" height="300" />
</div>
...
<script type="text/javascript">
myShow = new Slideshow('my_slideshow', {hu: 'images/', images: ['1.jpg','2.jpg','3.jpg']});
</script>
Notice the required properties that are passed to Slideshow on initialization: hu and images. Following is a brief description of those properties and a few other important ones you should know. For a full list please view the source code.
Therefore, it's possible that your Slideshow initialization actually looks something like this:
myShow = new Slideshow('my_slideshow', {hu: '../images/', images: ['apple.jpg','1.png','aaa.gif'], height: 300, width: 400, type: 'combo', pan: 'rand', zoom: 'rand', navigation: 'arrows+'});
When called for the first time, Slideshow manipulates the HTML within the wrapper element it is passed on initialization. How it manipulates the HTML depends on the properties it was called with. If called with navigation it adds a <ul> tag; if called with captions it adds a <p>. The end result may look something like this:
<div id="my_slideshow" class="slideshow">
<div> <!-- this is the slideshow element -->
<img src="images/1.jpg" alt="A picture" width="400" height="300" />
</div>
<ul> <!-- this is the navigation element -->
<li><a class="prev"></a></li>
<li><a class="next"></a></li>
</ul>
<p></p> <!-- this is the captions element -->
</div>
Therefore some valid CSS to style your thumbnails and captions slideshow might be:
div.slideshow {
margin: 18px auto;
}
div.slideshow p {
padding-top: 9px;
}
div.slideshow ul {
background: #FFF;
bottom: -35px;
left: 0px;
position: absolute;
overflow: hidden;
padding: 5px 0;
z-index: 10001;
}
div.slideshow ul a {
background-position: 50% 50%;
cursor: pointer;
display: block;
height: 25px;
margin-right: 5px;
opacity: 0.5;
width: 30px;
}
div.slideshow ul a.active,
div.slideshow ul a:hover {
opacity: 1;
}
div.slideshow ul li {
float: left;
list-style: none;
}
Slideshow uses three CSS classes to define the link to the previous slide, the link to the next slide and the active slide - previous and next only apply to arrows and arrows+ navigation modes while active only applies to arrows+ and thumbnails. The actual classnames used by slideshow are prev, next and active. To use your own classnames simply define the classes property with a new array upon initializing your slideshow: classes: ['anterior','siguiente','activo']. Note the order of the classes in the array must always be maintained: 1. previous, 2. next, 3. active.
Questions? Comments? Join the discussion here (Textpattern questions) or here (Javascript questions) or at #mootools in irc.freenode.net (chat). Please avoid emailing me directly since most common problems are already answered in the forums - thank you.