3

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.

Galichev Anton
  • 360
  • 5
  • 14
  • Try looking for a slideshow script that plays on mouse hover. – dee-see Jan 17 '11 at 23:20
  • 1
    So you want the images to rotate during hover? Do you mean a slideshow rotation, or actually rotate clockwise/anti-clockwise? – Orbling Jan 17 '11 at 23:20
  • During several days investigation, it seems to me that everyone who create slideshow scripts thinks that next and prev buttons are the only way to implement navigation. – Galichev Anton Jan 17 '11 at 23:25

2 Answers2

1

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');
});
Orbling
  • 20,413
  • 3
  • 53
  • 64
  • If you check source code of Cycle Plugin - you will see that images are defined in html code. It's not the solution I can use, because in my case there will be about 200 image requests on one page. – Galichev Anton Jan 17 '11 at 23:51
  • @Galichev Anton: If you look even more closely at the examples, you will see that it is possible: http://jquery.malsup.com/cycle/add3.html – Orbling Jan 18 '11 at 00:10
  • Thanks for your help. Unfortunately, even this implementation (check limitations section and sentence before) require a lot of code changes. In this case I don't see the value of plugin itself. I don't need transition effects or don't want to load two images per item, it's twice more than needed for my task. – Galichev Anton Jan 18 '11 at 00:38
  • @Galichev Anton: I agree, but got the impression you wanted a plugin rather than writing it yourself. – Orbling Jan 18 '11 at 00:39
0

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:

geoffreyd
  • 1,089
  • 6
  • 15
  • Unfortunately, I wasn't able to describe fully correct. When cursor enters thumbnail - slideshow is started. When cursor leaves thumbnail - slideshow is ended. Images are loaded dynamically and when user moves cursor out - he see last image that was shown in slideshow. Seems to me that it's rather obvious implementation, strange that I can't find working solution. – Galichev Anton Jan 17 '11 at 23:30