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
Discussion
February 11th, 2010 at 6:58 PM
Nice tutorial Zach. I’m still trying to learn jQuery and simple tutorials like these definitely help. Besides, I really like this idea with one big image. I can already think of some creative stuff that I can do with it. Thanks!
February 12th, 2010 at 2:45 AM
Really neat Zach. This will be useful for any kind for websites.
February 12th, 2010 at 4:00 AM
Nice end product here, but I can’t help but think that adding in the capability for crosslinking would be a little more impressive (ie. ability for non-linear movement between slides).
February 12th, 2010 at 7:13 AM
Thanks for this tutorial! It’s been very helpful.
February 12th, 2010 at 8:17 AM
Very nice effect – thank you for posting this tutorial. I am a big fan of jQuery!
February 12th, 2010 at 12:40 PM
Awesome tut, Zach! Very good explanation, and neat idea!
You’ve got me thinking: wouldn’t it be neat to make it more flexible so that you could add additional images and change the grid size without having to add additional case statments? I don’t think that would be very hard at all, and might add a lot to the usefulness of the script. The code and explanation I’m thinking of might be kind of hard to fit here, so would you mind if I posted the modified script and explanation on my blog? I’d give you full credit of course :)
Let me know if that would be acceptable!
February 13th, 2010 at 11:36 AM
This is excellent, great idea. Thanks for sharing :).
February 13th, 2010 at 8:49 PM
this is great! thanks! :)
February 15th, 2010 at 4:14 PM
Wow, this creates a really nice effect! Thanks for taking the time to share this and explain how to do it!
February 16th, 2010 at 6:36 AM
Great idea! Simple and efficient.
February 18th, 2010 at 6:43 PM
Thanks alot for sharing this tutorial.I’m thinking on adding captions (on the images with opacity) at bottom of every image.Can you help me out with that?
Thanks,
February 19th, 2010 at 4:29 PM
This tutorial is a great roadmap, I like the way you broke it down into manageable steps, and also touched on the other possibilities. Thanks Zach.
February 21st, 2010 at 6:08 AM
thanks you :)
February 22nd, 2010 at 12:40 AM
o this is WICKED, we need more jQ tuts like this man.
Keep it up.. im a total noob and am trying to add more pics instead of 4, this will keep me busy, thanks again cheers from Morocco.
February 22nd, 2010 at 6:29 AM
good Job ;)
February 22nd, 2010 at 6:58 PM
What would be easier: Implementing controls (next, prev) in this script or adding the easing plugin to my custom jflow slideshow?
February 24th, 2010 at 8:06 PM
It would be amazing if you could control the slides/pics with prev/next buttons…….
February 25th, 2010 at 12:40 PM
well i just wanted some automatic carousal effect but when i saw this ,i thought this looks simple and different … and after when i used it … i found quite impressive coz it was very easy to use and very clean in code of the css and javascript , atleast for me :)
thanks a lot
best wishes for ur future work and more :)
cheers !!! :)
February 27th, 2010 at 11:26 AM
Amazing designs, keep up the good work!
March 4th, 2010 at 10:38 AM
One of the best slider jquery tutorials i’ve seen. Awesome stuff.
March 11th, 2010 at 3:08 PM
Hey! Nice tutorial. But I am facing problem implementing it in IE7. Any idea. All the images come one after another instead of just showing one at a time.
March 11th, 2010 at 5:06 PM
I’m a little behind on comments here. Let’s fix that with some rapid-fire responses:
@Nick
You are more than welcome to make (and share) iterations of this tutorial. That’s the cornerstone of outstanding communities.
@Veeru
That falls outside the goals of this tutorials, but you should be able to do that by floating a separate div inside each slide. Transparency can be achieved using either the RGBa CSS spec or PNG backgrounds.
@Corey
Creating next/previous links would actually be relatively simple. You’d just have to include click events instead of timers in the jQuery file. All of the other code should stay the same.
@Rahul
I’m having a hard time visualizing the error you’re encountering. Are the images stacking on top of each other?
Also thank you to everyone who found this useful! Glad to know these tutorials get put to practical application.
March 16th, 2010 at 3:41 PM
Hi Zach,
Here is the link to the live HTML page: http://rjdesignz.com/Demos/test/ I face stacking problem in IE7
March 21st, 2010 at 2:03 PM
I was little confuse about jquery but you cleared, thanks for this lovely article.
March 28th, 2010 at 8:17 AM
Wonderful tricks… I want tried it on my own site some time…
March 29th, 2010 at 10:23 PM
Cool plugin!
I’ve just used it now and added a thichbox link for each picture to build up to the upcoming site http://www.route66.co.il
March 30th, 2010 at 9:05 AM
What is the license for this?
March 31st, 2010 at 10:31 AM
@Catalin
You’re free to use this however you please, we just ask that you keep any attribution commented in the code in place. The closest official license is:
http://creativecommons.org/licenses/by/3.0/
April 7th, 2010 at 11:04 AM
hey really amazing tutorial brother nd cool plugins
can u please tell me how to add more images on this slide ?? cuz there are just four images ?
April 20th, 2010 at 1:42 PM
Thanks for the great tutorial! I too would like to see this demo tweaked so more images can be added easily.
April 25th, 2010 at 12:49 PM
Great tutorial.
Thanks!
April 29th, 2010 at 2:14 AM
Thanks for this great tutorial. Really simple and the final outcome is superb!
April 29th, 2010 at 5:53 AM
This is really nice effect…..
I liked that…
Thanks,
May 9th, 2010 at 4:52 AM
Hi, nice tutorial.
I have question about multiple slideshow use.
So i try to but 2 slideshow list windows in header but the other one just work, so how and is it possible to make multi slideshow?
May 17th, 2010 at 2:13 AM
this Awesome, I was using Flash for fullscreen animation.
I am going to use this.
@Abdel, nice to see you in buildinternet.com
May 25th, 2010 at 2:49 AM
Hmm pretty cool slideshow effect… nice man
May 25th, 2010 at 3:32 PM
Hi !
So cool this tutorial… See integration on my e-commerce website.
To make it a little bit complicated, how put 4 images more ? (8 in total)
What are changes I have to implement to “image-rotator.js” ? … I don’t know coding… :/
thanks
Alex
June 12th, 2010 at 10:25 AM
It would be amazing if you could control the slides/pics with prev/next buttons…….
June 18th, 2010 at 1:36 AM
hey, great idea, I can use it at many places.. its much simple.
Thanks for sharing this great jquery slide show technique with us.
Thanks.
June 18th, 2010 at 5:39 PM
Göğüs Büyütücü
Göğüs büyütücü ürünler, göğüs büyütme hapı ve göğüs büyütme jeli satis ve siparis sitesi.
gogus,breast,gogus buyutucu,2009,news
June 22nd, 2010 at 5:08 PM
is very nice!! ;)
June 27th, 2010 at 8:49 AM
Very nice;)
June 30th, 2010 at 8:29 AM
Hi, i want to thank you for this tutorial, it was easy to understand and i’m gonna use it for featured project…thank again…
July 7th, 2010 at 8:22 AM
would it be possible to add more pictures?
July 7th, 2010 at 8:31 PM
as to my query, i was able to add 2 more pictures…. thanks for this..
one more thing thou, is it possible to adopt the transition of this effect to the “supersized” effect, i mean the smoothness.
July 12th, 2010 at 4:17 AM
Thanks for sharing this nice tutorial :P
July 13th, 2010 at 12:41 PM
Amazing, but how would one resize the slideshow? I wanted it to be 940px wide and 300px tall. I changed this in the css, but now 3/4 images don’t appear. I can’t link to an online page because it’s on localhost.
July 13th, 2010 at 4:46 PM
Ok I managed to resize it, but now I’m having issues gettning the “content” (the box below the pictures) to animate as well, I’m using wordpress so have managed to implement the images using customfields.
Here is the PHP file on Pastebin http://pastebin.com/dkFtXnF7
But I can’t get the section below the slideshow to animate as well.
July 18th, 2010 at 3:24 PM
this is awsome, will use this thanks!
Join the Conversation!
Remember: Life's not all doom and gloom, so please keep it constructive. If we've made an error or missed something big, please let us know! Learning is revisions, after all.