Slideshow effects with jQuery

Slideshow transitions with JavaScript using jQuery

jQuery is empowering JavaScript developers to do more than ever before. Used effectively, it can take your photo slideshows to the next level

Let’s face it, JavaScript is making a huge comeback lately as developers find more ways to use it effectively for motion and effects. And the introduction of new frameworks for JavaScript, like jQuery (http://www.jquery.com), allows you to build rock-solid, cross-browser solutions that look and work every bit as good as Flash.
In this tutorial we are going to give a quick introduction to jQuery and present three different examples of transitions you can add to your next photo slideshow. We’ll start easy with a fade transition, work through an intermediate slide transition and end with an advanced ‘mask-type’ transition (‘mask-type’ because we are faking a mask as there are no real masking abilities in JavaScript yet). When you’re done here, you will clearly see the benefits of using a framework like jQuery for JavaScript, and should have a pretty solid grasp on what you can do in terms of some simple animation. Let’s get started…

Project files for this tutorial can be downloaded here.
This article was originally authored by Matt Wiggins, and featured within Web Designer issue 165

01 You’ll need jQuery

The first step is to download jQuery, a framework built to simplify and speed up JavaScript development. If you’re new to jQuery, you may want to take a minute and go through the basic tutorial. The latest version can be found at the website (http://www.jquery.com) and it’s worth visiting to make sure you have the very latest version.

02 Setup folder/images

Set up a folder structure for your project. We kept it simple and created an XHTML file for each example, a folder for our photos, and included jQuery in the root folder of the project. When your folders are set up, choose a set of photos and re-size them so that they are all the same size.

03 XHTML

We will use a simple XHTML structure that includes the same elements across each example. You will need a main wrapper to add some padding, a frame for the photos that hides overflow and adds a border around the images, next/previous buttons and a transition container that will hold the images/mask. As with many of these steps, the full code can be found in the project files.

<div id=”wrapper”>
<div id=”frame”>
<!– photos –>
<div id=”transition-container”>
<img class=”photo” id=”photo-1” src=”images/photo-
1.jpg” alt=”photo one” />
<img class=”photo” id=”photo-2” src=”images/photo-
2.jpg” alt=”photo two” />
<img class=”photo” id=”photo-3” src=”images/photo-
3.jpg” alt=”photo three” />
<img class=”photo” id=”photo-4” src=”images/photo-
4.jpg” alt=”photo four” />
<img class=”photo” id=”photo-5” src=”images/photo-

Pages: 1 2 3 4 5