CODEWITHSUNDEEP
javascriptimagerotationrotator
Galichev Anton
Galichev Anton

Reputation: 360

How to rotate thumbnail images on mouse hover?

Looking for JS library or code snippet (jQuery is allowed) that can rotate images after user moves cursor to image. For example, this functionality is implemented for video thumbnails in Dailymotion.com website.

I am going to use this code for webpage with 20-40 thumbnails (application screenshots) and each item contains about 10 additional images that should start rotation when user moves cursor to thumbnail and stop when cursor leaves.

I don't want to load all of this images in html code, it's several hundreds requests that are not necessary each time user enters page.

Unfortunately, all code that I found use static image linking from html code.

I tried to find answer in search engines, but can't find correct formulation. I tried "image rotator JS", "change images on hover", "auto rotate images" and some other variations, may be this task simply has another name that I missed.

Upvotes: 3

Views: 4260

Answers (2)

Orbling
Orbling

Reputation: 20612

Try using the Cycle Plugin.

If you have a class for the thumbs called .thumb, then you can control it with the .cycle('pause') and .cycle('resume') commands.

$('.thumb').cycle({ ... }).cycle('pause'); // setup, choose your own settings, then pause

$('.thumb').hover(function() {
  $(this).cycle('resume');
}, function() {
  $(this).cycle('pause');
});

Upvotes: 1

geoffreyd
geoffreyd

Reputation: 1099

Sounds like your looking for something that apple calls 'Scrubbing', like they use in iPhoto.

Some quick searches turned up some libraries todo just this:

Upvotes: 0

Related Questions