Starting simple: a basic slideshow

A slideshow is a very common feature on web pages, and one that isn't hard to implement. For someone who's just starting out in the wonderful world of web design, though, trying to add something like this to your new site's home page could be daunting. Googling "web page slideshow" or something like that will return a massive number of results. There are probably hundreds of different ways to accomplish this goal, using a variety of different technologies. I'm going to show you one of the easiest.

What we'll be working with
This visual gimmick uses HTML and jQuery. If you're already familiar with these, skip down to "Let's get started". Otherwise, read on.

If you don't know what HTML is or how to write it, I highly recommend you go through at least part of the HTML course on w3schools.com. HTML is the foundation of web design, and if you're at all serious about web design, you need to understand it. Don't worry, it's not complicated.

jQuery is a variation of JavaScript. JavaScript is the most common coding language for making plain HTML pages, which can only be viewed, not interacted with, into highly interactive experiences. There's hardly a site out there nowadays that doesn't use JavaScript.

Unfortunately, JavaScript isn't the easiest thing to work with, especially for a beginner. That's where jQuery comes in. jQuery is designed to change how JavaScript is written, to make it faster, easier to write, and much more powerful. I'll explain the basics as I go through this tutorial, but if you want to learn more (and I highly recommend that you do), w3schools.com also does a jQuery course, or you can check out the official jQuery website.

Let's get started
The slideshow I'm going to be showing you how to build can be seen here. The example isn't fancy, but the principles can be applied to something much more elaborate. I'll probably do a follow-up post to show you some fancier things you can do. For now, let's start with the basics.

To start with, you'll need your images, which I recommend you crop to the same size. The cropping isn't strictly necessary, but the end product looks a lot better if all the images have the same dimensions. You'll also need an HTML document set up with all the basic elements - HEAD, BODY, etc.

Here's the HTML code for the element that's going to become our slideshow:

<div id="slideshow">
    <img src="slide1.jpg" />
    <img src="slide2.jpg" />
    <img src="slide3.jpg" />
</div>

Here are the important parts of this code:

• The DIV tag has its ID attribute specified. This allows the jQuery code to identify which element to make into a slideshow.
• The DIV only contains elements that are going to be slides. There shouldn't be anything that isn't going to be a slide inside your slideshow box.

This code is located in the BODY tag of the HTML page. it's basically just a box with three images in it. If you viewed the page at this stage, you'd probably just see the three images sitting in a row.

Time for some jQuery magic. You'll need to download 2 JavaScript files. First, you'll need the basic jQuery file, which you can get here (right-click/ctrl-click the link and save as). Second, you'll need a neat little jQuery plugin called Cycle (homepage here), which you can download here (again, right-click/ctrl-click the link and save as). Save both these files to the folder where you have your HTML page, or a sub-folder of that folder - just make sure you know the file path.

Now we need to add the following two lines of code to the HEAD tag of the HTML page:

<script type="text/javascript" src="jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="jquery.cycle.all.js"></script>

The first SCRIPT tag attaches the jQuery file, making it possible to use jQuery on your page. If you had the file in, say, a sub-folder named "Scripts", the SRC attribute of the SCRIPT tag would read "Scripts/jquery-1.6.4.min.js". The second SCRIPT tag attaches the jQuery Cycle plugin. Please note that the Cycle plugin will not work on its own - it needs the basic jQuery file.

Finally, we add one more set of code to the HEAD tag:

<script type="text/javascript">
$(document).ready(function(){
    $("#slideshow").cycle();
});
</script>

This is the first and only bit of actual JavaScript/jQuery you'll have to write. The first line of the script (after the opening SCRIPT tag) causes the script to run once the page is ready to run it - which doesn't necessarily mean once the page is 100% loaded. The last line of the script closes if off. The stuff in between is where the magic happens.

$("#slideshow").cycle();

Yes, that's really all it takes! The "$" basically means that this is something for jQuery to process, instead of ordinary JavaScript. The part inside the quotes, "#slideshow", is pointing the function to the HTML element that has an ID attribute (that's what the "#" sign means in this context) of "slideshow", exactly like the DIV tag we created earlier. The ID can be anything you want it to, just as long as what you put in the script is the same as the ID attribute of the HTML element containing your slides. This is called a jQuery "selector", and if you want to learn more, you can read all about them here.

The last part, ".cycle();" tells the Cycle plugin that the HTML element targeted by the selector should be turned into a slideshow. Now, if you've followed my instructions carefully, your slides should be cycling through like those in my example.

There is a lot more you can do with the Cycle plugin, but I'll cover some of that in another post. For example, try this script instead of the one above:

<script type="text/javascript">
$(document).ready(function(){
    $("#slideshow").cycle({
        fx: 'scrollVert',
        speed: 500,
        timeout: 1000
    });
});
</script>

It should create something like this. As I said, I'll explain more in a future post (or maybe more than one), and cover some flashier things you can do, but in the meantime, if you want to learn more about the Cycle plugin, you can check out the official site, which has lots of great examples and explanations.

I hope this post has been helpful. If there's anything I didn't make clear, or if there's things you'd like me to explain in future posts, let me know in the comments!