All geek questions in one place

How to rotate thumbnails on mouseover?

Look for a JS library or code snippet (jQuery enabled) that can rotate images after the user moves the cursor over the image. For example, this feature is implemented for video thumbnails on the Dailymotion.com website.

I am going to use this code for a web page with 20-40 thumbnails (application screenshots), and each element contains about 10 additional images, which should start rotation when the user moves the cursor to a thumbnail and stops when the cursor leaves.

I don’t want to load all these images into html code, these are several hundred requests that are not needed every time the user enters the page.

Unfortunately, all the code I found uses a static image associated with the html code.

I tried to find the answer in search engines, but I can not find the correct wording. I tried "JS image rotator", "change image on hover", "auto image rotation" and some other options, maybe this task just has a different name that I missed.

+3
source share
2 answers

Try using the Cycle Plugin .

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

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

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

It looks like you are looking for something that the apple calls "Scrubbing", as in iPhoto.

, :

0

Source: https://habr.com/ru/post/1786021/

More articles:


All Articles