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.
<!-- Slideshow =========================--> <div class="slideshow-block"> <a href="http://website.com" class="link"></a> <ul class="slides"> <li><img src="image.jpg"/></li> <!-- Any other slides --> </ul> </div>
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.
*{
margin: 0;
padding: 0;
outline: none;
border: none;
}
.slideshow-block{
position: relative;
width: 200px;
height: 150px;
overflow: hidden;
background: #111 url('img/bg.jpg');
}
a.link{
position:absolute;
height: 150px;
width: 200px;
display: block;
z-index: 10;
background: url('img/logo.png') no-repeat center top;
}
a.link:hover{
background-position: center -150px;
}
.slides{
z-index:0;
visibility:hidden;
}
.slides.active{
visibility:visible;
}
The jQuery
On the jQuery side, we want to accomplish two tasks:
- Tie the jQuery Cycle Plugin to our list of images, turning them into a slideshow.
- 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.
<script type="text/javascript">
jQuery(function($){
// Cycle plugin
$('.slides').cycle({
fx: 'none',
speed: 1,
timeout: 70
}).cycle("pause");
// Pause & play on hover
$('.slideshow-block').hover(function(){
$(this).find('.slides').addClass('active').cycle('resume');
}, function(){
$(this).find('.slides').removeClass('active').cycle('pause');
});
});
</script>
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.
