Slideshow with Mootools and Javascript
In this tutorial, we will learn how to make a simple slideshow with images or other content (like text) with JavaScript and MooTools. MooTools is a simple JavaScript library that has some functions already programmed for you. This tutorial assumes that you have a basic understanding of html, css and JavaScript. If you aren’t familiar with MooTools, don’t be afraid. Using it will appear to be easier than you think.
The final product that we will make is this, a content <div> with two slide buttons to make the content slide left or right.
Start with downloading the latest version of MooTools via MooTools.net. Unzip and upload the .js file to your server and write down the .js file’s filename. Next, make an empty html file (e.g. xhtml.html), an empty css file (e.g. css.css) and an empty javascript file (e.g. script.js). Place these three files in the same folder, together with the MooTools library (also a .js file).
In the html file, link to the MooTools library in the html file’s <head> section, like this:
<script src="mootools-1.2.4-core-nc.js" type="text/javascript"></script>
<script src="script.js" type="text/javascript"></script>
The idea behind the slideshow is to place all content in the cells of a single row table. This table is placed in a div section, which “masks” all but the currently showing table cell. By pressing the left or right arrow, the javascript code makes the single row table slide one cell to the left or right. The reason for using MooTools are the cool transition effects (30 different effects, look to the end of the page for a demonstration!).
The html looks like this (put inside the body section of the html file):
<div id="slideleft"></div>
<div id="slideright"></div>
<div id="maskdiv">
<table id="containertable" cellpadding="0" cellspacing="0">
<tr>
<td class="contentcell">
<div class="contentdiv" style="background-color:#C09;">
<p>Item 1</p>
</div>
</td>
<td class="contentcell">
<div class="contentdiv" style="background-color:#C39">
<p>Item 2</p>
</div>
</td>
<td class="contentcell">
<div class="contentdiv" style="background-color:#C69">
<p>Item 3</p>
</div>
</td>
<td class="contentcell">
<div class="contentdiv" style="background-color:#C99">
<p>Item 4</p>
</div>
</td>
</tr>
</table>
</div>
The “slideleft” and “slideright” div sections are given a background picture in the css (below). I put four items in the content div’s. You can use a loop to get content from a database and put it in the content div.
The css looks like this (put inside the css file):
#maskdiv {
position: absolute;
top: 100px;
left: 200px;
width: 200px;
height: 100px;
overflow: hidden;
border: 1px solid black;
}
#containertable {
position: absolute;
left: 0px;
border: 0px;
padding: 0px;
margin: 0px;
}
.contentcell {
border: 0px;
padding: 0px;
margin: 0px;
}
/* the content divs must have the same height and width as the "mask" div, overflow must be set to "hidden" */
.contentdiv {
width: 200px;
height: 100px;
border: 0px;
padding: 0px;
overflow: hidden;
}
#slideleft {
position: absolute;
top: 210px;
left: 200px;
width: 19px;
height: 25px;
cursor: pointer;
background: url(left.png) center top no-repeat;
}
#slideright {
position: absolute;
top: 210px;
left: 223px;
width: 18px;
height: 25px;
cursor: pointer;
background: url(right.png) center top no-repeat;
}
The JavaScript looks like this (put inside the .js file), I put comments in the code to clarify things:
window.addEvent('domready', function()
// all functions that use MooTools must be called within the "domready" event
{
var newTweenElement = $('containertable');
// the MooTools function $('something') gets the html element with id='something' and puts it in a variable. Same as the javascript function getElementById.
var newTween = new Fx.Tween(newTweenElement, { link:'ignore', transition:'quad:out' });
// Make a new tween. In MooTools, Fx.Tween(...) creates a tween from the existing state of a html element to another state. We will make a tween in the 'left' property of the html element with id "containertable".
$('slideleft').addEvent('click', slideLeft.bind(newTween));
$('slideright').addEvent('click', slideRight.bind(newTween));
// Add a (mouse) "click" event to the left and right button. With the method "bind" you can bind the mouseclick event to the slideLeft or slideRight function.
});
var slideRight = function()
{
var a = $('maskdiv').getStyle('width').toInt();
// Get the css style property "width" from the html element "maskdiv" and put it in a variable.
var b = $('containertable').getStyle('left').toInt();
var c = b - a;
var d = $('containertable').getStyle('width').toInt();
if (c > (-1 * d))
{
this.start('left', c);
// Start the tween that slides the content. "this" refers to the tween we created above, because we used the "bind" method above to bind the tween to this function.
}
}
var slideLeft = function()
{
var a = $('maskdiv').getStyle('width').toInt();
var b = $('containertable').getStyle('left').toInt();
var c = b + a;
if (c <= 0)
{
this.start('left', c);
}
}
The complete xhtml, css and JavaScript files of this tutorial can be downloaded here as a .zip file (30 kb).
