Animate Panning Slideshow with jQuery

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.

Panning Slideshow Result

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:

Panning Slide Layout

Let’s get started by creating a new HTML file with the following code:

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.

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:
Panning Motion Diagram

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.

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

Posted Thursday, February 11th, 2010 · Back to Top

SPONSOR

Add Comment

202 Comments 158 Mentions

  1. طراحی سایت و سئو Author Editor

    thats great tnks

    ·

  2. rury Author Editor

    Hi Zach, thank you very much for the tutorial and the code. I have tried it and it works great!, however, I’d like to ask you about the time it takes to launch the slide effect. Is it possible to make it “play” once the site has loaded, or, let’s say, two or five seconds after the site has been fully loaded? It seems the effect takes some time to begin and I’d like it to show the pictures rather quickly. Thanks for your reply! (ps: I’m a new in jquery coding)

    ·

  3. ill501 Author Editor

    Sweet slide. I was able to implement it with minimal alterations. I was wondering where I could force my images to scale to my css sizing. I’m currently required to touch both my css and js files or resize my images to make the effect work correctly.

    ·

  4. Jesse Author Editor

    Nice script! seems like the first slide takes 2x the timer duration before it starts, and then the other slides rotate normally… any way to fix that?

    ·

    • Jesse Author Editor

      ah, looks like since the current_panel was set to 1, it was repeating the first one (hence the double time), so I put the current_panel to 0 (not sure if that is nec.) and then put in a “default:” below case 2. seems to be working.

      ·

  5. Diana Author Editor

    This worked very well for me. I had a few issues, but got some help to work through the issues. Thanks.

    ·

  6. Joseph Buarao Author Editor

    It works good in FF, Chrome and IE8 but I got a few bugs in ie7 I don’t know why? could you help me guys..

    ·

  7. pikasso Author Editor

    super – senk………..

    ·

  8. Vijay Author Editor

    Thanks for your nice tutorial

    ·

  9. skandal Author Editor

    I like this.. this is so good

    ·

  10. maurohead Author Editor

    It would be amazing if you could control the slides/pics with prev/next buttons…….

    ·

  11. MainWall Author Editor

    It works good in FF, Chrome and IE8 but I got a few bugs in ie7 I don’t know why? could you help me guys.. HD Wallpaper

    ·

  12. العاب سيارات Author Editor

    When I read your blog post, Hopefully it doesnt disappoint me as much as this place. After all, Yes, it was my option to read, however i actually thought youd have something interesting to express. All I hear is a variety of whining about something you could fix should you werent too busy trying to find attention.

    ·

  13. web design nepal Author Editor

    It is a nice post it can help people like me who are just a toddlers around the web. Thanks for the share..

    ·

  14. Cristy Gordy Author Editor

    The Zune concentrates on being a Portable Media Player. Not a web browser. Not a game machine. Maybe in the future it’ll do even better in those areas, but for now it’s a fantastic way to organize and listen to your music and videos, and is without peer in that regard. The iPod’s strengths are its web browsing and apps. If those sound more compelling, perhaps it is your best choice.

    ·

  15. lv wallet Author Editor

    If you are looking for something like that then louis vuitton must be your bet.

    ·

  16. chanel uk 2012 Author Editor

    The actual chanel bags price trademarks as well as quilting should fall into line.

    ·

  17. coach shoes Author Editor

    The top “in coach outlet store will be the Mia Natural leather Satchel– lustrous, prolonged band, along with foot to stop scrubbing.

    ·

  18. Issac Maez Author Editor

    I simply want to tell you that I am very new to weblog and seriously enjoyed you’re web page. Likely I’m likely to bookmark your blog post . You surely come with wonderful posts. Cheers for sharing your website page.

    ·

  19. hguhf Author Editor

    Great morning, could possibly be the following is towards situation merely well, i%u2019ve become executing study concerning your webpage which%u2019s why it’s obviously pro. I include been developing a fresh unique writings with your better half with attempting return glance good, each and every time as well as feel a remedy i%u2019ve damage it. Recommendations about how burdensome was generally known as the to successfully site? Properly any human being much for example me lacking an occurence make it happen, at the top that complete folks boost web should possess in connection with chewing completely up receiving that will done plus?

    ·

  20. Paid Directory List Author Editor

    We install in our Website, nice looking

    ·

  21. Player Grand Pianos Author Editor

    The ideas are compressed and it is straight towards the point. The approach on sharing the concepts which are primarily significant was done very well and that no need to have for hard terms to made use of for us to know the main points on Baby Grand Player Pianos you wish to conceive.

    ·

  22. arjun rk Author Editor

    pretty cool slideshow effect, thankss

    ·

  23. arjun rk Author Editor

    pretty cool slideshow effect

    ·

  24. Project Tracking Software Author Editor

    jquery always makes a animation drift free and it all depends on the kind of coding and specifications. Nice post and tutorial though.

    ·

  25. Stuart Rutter – Aura99 Author Editor

    Great article very useful example of a JQuery slider.

    ·

  26. karthick Author Editor

    Hi zach, Really nice work. now I learn about this slider and timer events.

    Thanks for classified these.

    ·

  27. Christa Scavotto Author Editor

    Hiya, I’m really delighted I experience organize this info. Today bloggers announce mere about hearsays plus I would like to found a person another very worthwhile internet site : right here

    ·

  28. 路人 Author Editor

    真心羡慕啊

    ·

  29. Swapan Author Editor

    I have got a clear idea with your awesome tutorials. I am jQuary Learner.

    ·

  30. Keikocanary Author Editor

    Nice motion and very useful !!

    Thanks for your simple & kindness tutorial!!!

    ·

  31. Ian Author Editor

    Sorry but, was not able to find a giant “DEMO” link at first glance on this page :/ Just friendly feedback. Thanks!

    ·

  32. Andrew Author Editor

    Cool! Can I put it on my site?!

    ·

  33. web filtering Author Editor

    Thanks thanks!

    ·

  34. good gaming laptops under 700 dollars Author Editor

    Great submit, very informative. I ponder why the other specialists of this sector don t understand this. You should proceed your writing. I m sure, you ve a huge readers base already!

    ·

  35. leurin Author Editor

    Hola !!!!!!!!!!!!

    Tengo Un Problema Co Eso De Cofigurar JavaScrip en el tema Tengo Una Opcion Para Colocar Una Galeria Extra Y Me Da Dos Opcciones Una Para Colocar Css y la Otra Para Html Pero Quiero colocarle el otro codigo y no se que hacer nesecito que me den una mano. Gracias

    ·

  36. dswww Author Editor

    great slider!!! good job!
    thanku you

    ·

  37. Ratih Nurmalasari Author Editor

    Hi Dude,
    It’s Fantastic! Thanks!

    ·

  38. برهان گرافیک Author Editor

    You’re truly a excellent webmaster. The web site loading pace is incredible. It sort of feels that you are doing any distinctive trick. In addition, The contents are masterwork. you have done a fantastic process on this topic!

    ·

  39. shobhit Author Editor

    Wow nice information you have here.

    ·

  40. kartesharj Author Editor

    Please send your samples to content.Thank

    ·

  41. sfa Author Editor

    i will use this slide show in my upcoming freelance project, thanks for share it

    ·

  42. sarami Author Editor

    Como puedo aumentar más imágenes

    ·

  43. Keya Directory Author Editor

    Hi this is a great bit of code. But is it possible to use this with sticky footer???

    I am using this with the sticky footer but I get a scroll bar for my large background image? so when I scroll down the footer does not stay at the bottom :(

    ·

  44. طراحی سایت Author Editor

    موافقم خیلی علیه

    ·

  45. سئو Author Editor

    جاداره از طرف تیم ایساتیس مجری طراحی و سئو وب سایت های ایران از شما تشکر کنم

    ·

  46. وی پی ان Author Editor

    عالی بود. امیدروارم وی پی ان بدردتون بخوره

    ·

  47. سئو Author Editor

    Thank you .

    ·

  48. Precious Fab-cast Pvt. Ltd Author Editor

    Thanks for this tutorial! It’s been very helpful.

    ·

  49. Precious Fab-cast Pvt. Ltd Author Editor

    Great job Done ! Thanks for sharing with us !

    ·

  50. Ampoule Filling Machines Author Editor

    Awesome! Thanks for Sharing…

    ·

  51. Hoi dap Author Editor

    so good! nice slider

    ·

  52. Souda Zhou Author Editor

    Great one! Thanks a lot!

    ·

  53. سئو Author Editor

    Awesome, Thanks for sharing with us !

    ·

  54. آیلتس Author Editor

    so good! nice slider

    ·

  55. Christoph Author Editor

    Really nice slider!
    But the problem with more than 4 images is keeping in touch…
    tried all the code for more than 3 hours now, tried to understand the function, amended so much functions with this ….
    Whatever I tried, only the first 4 images have been shown,

    What I am doing wrong?
    Can you update the exactly sample you given above, just for 8 images?
    Your code is too good for just only 4 images, but altough frustrating to update.
    It have to be easy to update this for 8 or more images ?!
    I cant get the solution, I am very thankful for your help….

    Best regards,
    Christoph

    ·

  56. Mandee Author Editor

    Wiw!

    Can figured it out now how to add more than 4 images :)

    Great I have now 8 images setup..

    Thank You..

    ·

  57. درب اتوماتیک Author Editor

    thanks admin niceeeeeeeeee

    ·

  58. BHARODIYAPRADIP Author Editor

    HAY

    ·

  59. طراحی سایت Author Editor

    tanx admin very good

    ·

  60. طراحی سایت Author Editor

    good, perfect

    ·

  61. طراحی سایت Author Editor

    good really

    ·

  62. web tasarım Author Editor

    is there any way to use as full width&height backround slider

    ·

  63. Sepatu Murah Author Editor

    Great job pall. Kepp posting. Love JQuery. Write less do more

    ·

  64. طراحی سایت Author Editor

    I love jQuery.

    ·

  65. طراحی سایت Author Editor

    tnx very usefull

    ·

  66. خرید vpn Author Editor

    good!

    ·

  67. طراحی سایت Author Editor

    thanks

    ·

  68. خرید vpn Author Editor

    tnx, really useful

    ·

  69. مهاجرت به کانادا Author Editor

    very good

    ·

  70. 風扇 Author Editor

    Hello! I just want to give a huge thumbs up for the good information you

    ·

 

Build Internet by One Mighty Roar. Since 2008.