Cycle Through Images on Hover with jQuery

A quick way to add a hover responsive, fast cycling, jQuery powered slideshow to your site.

The Basics

I first saw this style slideshow as a Flash solution on Cargo Collective, which has since been updated to Javascript. As it turns out, it’s actually quite easy, making it a quick addition to any site you wish to implement it on.

Here’s what we’ll be doing:

  • Super fast slideshow that only runs when hovered over.
  • Overlay logo that toggles between two different states depending on hover state
  • Inspiration piece for this tutorial: Cargo Collective
  • See our end goal by visiting our demo page.

The HTML

This is the structure for each slideshow, with the images are pulled from the unordered list and turned into a slideshow by jQuery Cycle Plugin.

The .link element is where a URL can be provided for when the slideshow is clicked. It is also how we will swap the logo on hovers.

The CSS

The dimensions for my slideshow are 200px by 150px. Depending on the sizes of your logo and slides, the below background position coordinates and overall dimensions may need to get adjusted.

  • The logo is toggled between the two color variations using the background position hover technique.
  • The unordered  slides list is given a class of “active” when hovered over, making it visible on the page.

The jQuery

On the jQuery side, we want to accomplish two tasks:

  1. Tie the jQuery Cycle Plugin to our list of images, turning them into a slideshow.
  2. Swap between pause and play states when the slideshow is hovered over. This means the slideshow is hidden and paused when the mouse is not over it.

Closing

I’ve included two versions of the script, one with the TV and one without (for easier copy and paste implementation). As always, when in doubt, try using the downloadable demos as a foundation to build from.

I look forward to seeing what folks are able to make happen – enjoy!

Note: You are able to place multiple slideshows on the same page, meaning it’s feasible for you to make a gallery out of a series of thumbnail slideshows.

Posted Tuesday, September 27th, 2011 · Back to Top

SPONSOR

Add Comment

71 Comments 3 Mentions

  1. Todd Author Editor

    I decided over this past weekend to try and rebuild that hover cycle on Cargo Collective and implement it in my new site redesign so I was delighted to see this while browsing around in class. Awesome tutorial and Thanks a bunch.

    ·

    • phphunger Author Editor

      im trying to implement the same for one of my flash games portal..i am trying this same using only css and the javascript onmouseover event..but any how thanks for providing such a great solution like this…really jQuery rocks…

      ·

  2. Tutoriaux Webmasters Author Editor

    I”l try to implement it in my new project !

    ·

  3. Amir Author Editor

    I really like

    ·

  4. Paul Author Editor

    Why are the images all crazy like that? ;-)

    ·

  5. Marko Wsd Author Editor

    OMG, I have a great use for this, check my website, I got some TV as well, if i put it inside the T.V to create the effect, thats a first.

    Ill start working on this matter and see the end result :) hopefully itll be like this.

    ·

  6. Dinesh Author Editor

    Really impressive.

    ·

  7. AndyiBM Author Editor

    Not sure I’d ever have a use for it, but it made me laugh – crazy TV! Thanks.

    ·

  8. hugo Author Editor

    Smart! Love it! But it would be more useful if it would used sprites for this…

    ·

  9. Jordan Author Editor

    This is great! thanks for showing sam!

    ·

  10. Lutfie Tutorial Blog Author Editor

    woww its veri nice thanks for all

    ·

  11. moedas pw Author Editor

    You have to believe in yourself . That’s the secret of success .

    ·

  12. rift platinum Author Editor

    You have to believe in yourself . That’s the secret of success

    ·

  13. Selim Author Editor

    Newbie to this.. Anyone know how I can get this to start on load vs on hover? I couldn’t find anything on the cycle site.

    $(‘.slideshow-block’).hover(function()

    Thanks

    ·

  14. painting contractors in chennai Author Editor

    i really like this post & i try to do with my site

    ·

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

    this post help me… tnks a lot

    ·

  16. Rehana Sulthan Author Editor

    This is really a cool and interesting query with Java. Like you & Java.
    Thanks for wonderful query.

    ·

  17. Geoff Author Editor

    Is there a way to reset/restart the “slideshow” from the first image on mouseout (instead of pausing)?

    ·

    • Geoff Author Editor

      I found it:

      $(this).find(‘.slides’).removeClass(‘active’).cycle(‘stop’).cycle({
      startingSlide: 0
      });

      ·

      • mayWz Author Editor

        Thank you! It help me a lot. ;-D

        ·

  18. Stvn Author Editor

    Is there anyway to remove the hovered over. Meaning once login it will just play instead of hovered over. Please help

    ·

    • DarthMegan Author Editor

      // Pause & play on hover
      $(‘.slideshow-block’).hover(function(){

      change the .hover() to .ready(). That tells it to start when the page has loaded.

      ·

  19. felipe Author Editor

    this blog will not be update anymore?

    ·

  20. Khalid Author Editor

    Where did you get that tv from? Can we use it (for a non-commercial purpose in my case)?

    ·

  21. Michael Author Editor

    Thanks for the tutorial. Can’t believe I have never seen this website before – love the design and layout.

    ·

  22. Chris Author Editor

    Wow mate, really cool, and unique! I agree I havn’t seen this before like this, yet somewhat such a simple concept :)

    ·

  23. Beats by Dr Author Editor

    Wow,so many people like you post, so nice

    ·

  24. Jay Jalaram Extrusions Author Editor

    Awesome 1 Sam Dunn, great posting

    ·

  25. jacob Author Editor

    That effect was used on entry page at lightandmotion.com awhile back.

    ·

  26. Forestry Truck Author Editor

    what a neat effect. definitely gave me a lot of ides to work with

    ·

  27. شات صوتي Author Editor

    You are great and thank for you articles

    ·

  28. Mark Author Editor

    Great work. A really neat effect. I like using JavaScript to do things you wouldn’t normally see on a standard web page. Thanks for the demo.

    ·

  29. Brushstroke Design Author Editor

    Nice work, I absolutely love JavaScript, in my opinion, with the way things are going, it won’t be long before Flash is completely gone.

    ·

  30. Dheeraj Author Editor

    Really amazed to know that jQuery can work in this way also.
    Great work !
    Thanks …

    ·

  31. phphunger Author Editor

    exactly what i am looking for this…cool work…great!!!!

    ·

  32. Christian Louboutin Author Editor

    Don’t forget the things you once you owned. Treasure the things you can’t get. Don’t give up the things that belong to you and keep those lost things in memory.  

    ·

  33. François Author Editor

    Hi, thanks for your work,

    I just implemented the script on my page. It works but sometimes the animation blocks for a second or two. Even in your demo page the animation blocks like this sometime.

    Is it normal. Is there anything that can be done to make this more fluid ?

    Another question : Can I get a fadein effet ?

    ·

    • Pedro Author Editor

      Hello François, did you try to get the fade effect between slides?
      Thanks

      ·

  34. Ash Author Editor

    Very interesting, good work.

    ·

  35. saha Author Editor

    Nice sharing. Very informative tutorial. jQuery is awesome. Thanks for sharing this post and code snippets.

    ·

  36. Bob Author Editor

    anyone else experiencing problems with this in IE8??? It works in all other browsers for me except that.

    ·

  37. freelance web designer kerala Author Editor

    Nice Work….. Thanks…. :)

    ·

  38. Rachel Author Editor

    Thanks for the tutorial–works great. Just one question, is there a way to slow down the slideshow? Thanks!

    ·

  39. Mike Author Editor

    I was just wondering the same thing, Rachel.

    ·

  40. Mike Author Editor

    Figured it out. The “speed” option is set in milliseconds. speed = 1000 will cycle the slides once every second.

    ·

  41. manona Author Editor

    thanks a lot!
    one question: i have three links for “slides”, “slides2″ and “slides3″
    я делала
    // Cycle
    $(‘.slides’).cycle({ fx: ‘none’, speed: 1, timeout: 70 }).cycle(“pause”);
    // Pause & play on hover
    $(‘.link1′).hover(function(){ $(‘.slideshow-block’).find(‘.slides’).addClass(‘active’).cycle(‘resume’); }, function(){ $(‘.slideshow-block’).find(‘.slides’).removeClass(‘active’).cycle(‘pause’); });

    // Cycle $(‘.slides2′).cycle({ fx: ‘none’, speed: 1, timeout: 70 }).cycle(“pause”);
    // Pause & play on hover $(‘.link2′).hover(function(){ $(‘.slideshow-block’).find(‘.slides2′).addClass(‘active’).cycle(‘resume’); }, function(){ $(‘.slideshow-block’).find(‘.slides2′).removeClass(‘active’).cycle(‘pause’); });

    // Cycle $(‘.slides3′).cycle({ fx: ‘none’, speed: 1, timeout: 70 }).cycle(“pause”);
    // Pause & play on hover $(‘.link3′).hover(function(){ $(‘.slideshow-block’).find(‘.slides3′).addClass(‘active’).cycle(‘resume’); }, function(){ $(‘.slideshow-block’).find(‘.slides3′).removeClass(‘active’).cycle(‘pause’); });

    Chrome show me images of “slides”, after “refresh page” show images of all: “slides”, “slides2″ and “slides3″, Firefox show images of “slides” only… where is mistake?

    ·

  42. Liita Author Editor

    Thanks for the tut.

    Just letting you know that I’m getting a malware warning from Google ( see : i46.tinypic.com/5l9sab.png ) when trying to reach this page.
    (I’m glad that this time I ignored it, and just clicked through.)

    ·

  43. mobile app development Author Editor

    jQuery is really amazing stuff. But I was aware of very basic codes & effects. Now this post will help me to learn more advance things.

    ·

  44. آموزش زبان Author Editor

    Smart! Love it! But it would be more useful if it would used sprites for this…

    ·

  45. medafighterX Author Editor

    hello! is it possible to use a div instead of the image? I want the list to work on a div as well so that I could use a background image instead

    ·

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

    hello! very niceeeeeeeeeee!!!!!!

    ·

  47. Ink Cartridges Author Editor

    I like it!

    ·

  48. خرید آپارتمان در استانبول Author Editor

    this is funny design,but i like this one.maybe i use it

    ·

  49. Bill Author Editor

    Much mahalos for this my friend

    ·

  50. mkaya Author Editor

    Hi,thanks for ur sharing. I did in my site but it did not work in internet explorer How can i solve that?

    ·

  51. David Author Editor

    Hi,

    is there a way to run the animation automatically on page load and stop the animation on a certain image?

    Thanks!

    ·

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

    very goof thanks admin

    ·

  53. Ankit Jain Author Editor

    Awesome

    ·

  54. Graphic Designer Vancouver Author Editor

    Sam you have provided an awesome tutorial. However, this does not work for IE; if you can provide some solution, please let me know. I will be thankful to you.

    ·

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

    good. tnx

    ·

  56. Ashley Author Editor

    Hey there! Way awesome. Just what I was looking for.
    Any way to make it stop on a certain frame?
    I want it to start cycling through the images on load and then when the user clicks/hovers, I want it to stop (permanently)on the frame that I have assigned.
    Please help, I need this immediately :)

    ·

  57. طراحی سایت|برنامه نویسی|بهینه سازی سایت|آموزش|مقاله|کامپیوتر Author Editor

    We’re a gaggle of volunteers and starting a brand new scheme in our community. Your website offered us with useful information to paintings on. You’ve performed a formidable job and our entire community might be thankful to you.

    ·

  58. abhay Author Editor

    how to add fade in fade out effect in this plugin

    ·

    • Liita Author Editor

      It’s in the jQuery docs. With examples : api.jquery.com/category/effects/fading/

      ·

      • Betyár Author Editor

        Tried to get this to work with the .fadeIn() as in the API, can’t seem to figure it out.

        ·

  59. Kalyan Author Editor

    How to make my first image as default visible image.?

    ·

  60. david Author Editor

    really great coding !

    just a question : Can the images from the animation load ONLY WHEN the hover is effective ?

    cause when using this per example 20 times on one page, plus an average of 10 pics per set (20×10=200 thumbs)… is starting to get heavy and are not good for page request.

    regards !
    David

    ·

  61. Jason Author Editor

    This is a great example to show that a developer can be creative. Thanks for the post. I’m a proponent of Jquery and love this kind of stuff!

    ·

  62. Paulo Figueiredo Author Editor

    tnks!
    just what I was looking for!

    (look those SPAM messages but its true lol)

    ·

  63. Matthew Author Editor

    Yes we will look into this when we build responsive sites using jquery..

    ·

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

    thanks

    ·

 

Build Internet by One Mighty Roar. Since 2008.