Slideshow effects with jQuery
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
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.
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.
<!– photos –>
<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-