Animate Panning Slideshow with jQuery
If there’s one thing that never seems to go out of style, it’s a good jQuery slideshow.
Highly visual websites rely on the ability to showcase imagery automatically. Whether it be a professional photographer or zoo, slideshows pop up so frequently because they work well.
In today’s tutorial we’ll take the makings of a classic slideshow, but use a different kind of transition to animate between slides. It may not fit every project, but diversity is always welcome in the world of web design.
The Goal
Be the end of this tutorial, we’ll have a slideshow that transitions by changing the visible window. You will need to download two plugins for this tutorial: one for easing animations and one for timing slide changes. I’ve also packaged both in the tutorial source file below.
Structuring the Slideshow
Step one is setting up the HTML structure for the slideshow.
As you may notice, we’re loading a few external JavaScript files into this page. After loading in the latest version of jQuery, we bring in the two plugins mentioned above. I’ve put both into a subfolder to keep things organized. The last JavaScript file loaded is “image-rotator.js”, and is where all of our custom jQuery code will go in a few steps.
Keeping with convention, we’ll contain the slideshow inside of an unordered list. This type of slideshow will require a helper “window” div in order to work correctly. Since we’re essentially looking at a specific corner of a larger image (simulated by the list) we will need to mask the areas outside of focus. This may sound a little complicated, but the image below should help you visualize:
Let’s get started by creating a new HTML file with the following code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Panning Slideshow | Build Internet Tutorial</title> <link rel="stylesheet" href="panning-slideshow.css"/> <script src="http://code.jquery.com/jquery-latest.js"></script> <script src="js/jquery.easing.1.3.js"></script> <script src="js/jquery.timer.js"></script> <script src="image-rotator.js"></script> </head> <body> <div id="window"> <ul id="slideshow"> <li class="box1"><img src="images/tiger.jpg" alt="Tiger"/></li> <li class="box2"><img src="images/macaw.jpg" alt="Macaw"/></li> <li class="box3"><img src="images/bald-eagle.jpg" alt="Bald Eagle"/></li> <li class="box4"><img src="images/panda.jpg" alt="Panda"/></li> </ul> </div> </body> </html>
Style and Arrangement with CSS
The biggest change from typical slideshows is that the “#window” div is used to block out the full list images via overflow:hidden. Keep in mind that the grid of slideshow images is actually 1920px wide and 700px high. Since we’re only showing one slide at a time, the #window div cuts the visible area to 960px width and 350px height.
Copy the code below into your CSS file.
*{margin:0; padding:0;}
body{background:#353637; height:100%;}
#window{clear:both; width:960px; height:350px; background:#131310; overflow:hidden; position:relative; margin:10px auto 10px auto;}
#slideshow{width:1920px; height:700px; overflow:hidden; position:relative;}
#slideshow li{width:960px; height:350px; float:left; display:inline;}
As with any CSS file, there is always opportunity to condense and streamline the styles involved. If you end up making a more efficient version of this, please share it with the rest of us!
Animating with jQuery
The primary role of jQuery in this slideshow is to adjust the coordinates of the list item image being shown. Our roadmap is below:
With this in mind, let’s turn these motions into jQuery animations. Copy the code below into your project’s JavaScript file, and then meet us below for the script explanation.
$(document).ready(function(){
//This keeps track of the slideshow's current location
var current_panel = 1;
//Controlling the duration of animation by variable will simplify changes
var animation_duration = 2500;
$.timer(6000, function (timer) {
//Determine the current location, and transition to next panel
switch(current_panel){
case 1:
$("#slideshow").stop().animate({left: "-960px", top: "0px"}, {easing: 'easeOutBack', duration: animation_duration});
current_panel = 2;
break;
case 2:
$("#slideshow").stop().animate({left: "0px", top: "-350px"}, {easing: 'easeOutBack', duration: animation_duration});
current_panel = 3;
break;
case 3:
$("#slideshow").stop().animate({left: "-960px", top: "-350px"}, {easing: 'easeOutBack', duration: animation_duration});
current_panel = 4;
break;
case 4:
$("#slideshow").stop().animate({left: "0px", top: "0px"}, {easing: 'easeOutBack', duration: animation_duration});
current_panel = 1;
break;
timer.reset(12000);
}
});
});
This code starts out by declaring two variables. The first is current_panel, and will be used to keep track of the slideshow’s current location. The second is animation_duration and is used to affect all transitions in one place, rather than having to change times in four different locations. Where possible, it’s typically a good idea to condense attributes like this into variables for easy editing.
The timer function is based on our second plugin. Every 6000 milliseconds, the function encapsulated is fired. This function determines the current panel, and then animates the transition to the next sequential panel. Panel 4 automatically resets back to the start. Once the transition has been made, the current_panel variable is updated, and the timer is reset. Not bad!
What About Easing?
You may have noticed the easing attribute within the animate function. The easing plugin gives the transition a smooth elastic feel instead of a typical rigid motion. I’ve selected “easeOutBack” for the demo, but feel free to experiment with other easing options for your version.
Other Possibilities
Using this method, you could also setup one large slide instead of four individual ones. This would allow you to scan the contents of an oversized image in distinct zones, like a map.
Updating Delay
I started working on this slideshow before the delay function was added to the latest version of jQuery. While I haven’t explored it much yet, it seems like the timer plugin used here might be able to get replaced by it. If anyone chooses to explore this route, be sure to let us know what you come up with!
Have we missed anything/made any errors? Are there any steps that need further explanation? Let us know in the comments and we’ll try to sort it out!
The pictures of zoo animals used in this tutorial were all found via Flickr. Individual photo credits: Bald Eagle / Tiger / Panda / Macaw
