Rotate Thumbnails in MouseOver and Stop Rotate in Mouseleave

386
March 04, 2017, at 09:25 AM

I have a code that works perfectly when the number of thumbnails to rotate is 16 and the location is the same for all (only changes the name of the file due to the thumbnail number). Example: http: //www.urltoimage1.jpg....http: //www.urltoimage16.jpg

This is the html:

<img width="189" height="142" src="http: //www.urltoimage8.jpg" class="someclass" id="latest-499" onmouseover="thumbStart('latest-499', 16, 'http: //www.urltoimage');" onmouseout="thumbStop('latest-499','http: //www.urltoimage8.jpg');">

Here is the javascript:

// JavaScript Document
    //rotating thumb functions
    var rotateThumbs = new Array();
    function changeThumb( index, i, num_thumbs, path)
    {
        if (rotateThumbs[index])
        {
            if(i<=num_thumbs){          
                document.getElementById(index).src = path + i + ".jpg";
                i++;
                setTimeout("changeThumb('"+ index +"'," + i + ", " + num_thumbs + ", '" + path + "')", 600);
            }else{
                changeThumb( index, 1, num_thumbs, path);
            }
        }
    }
    function thumbStart(index, num_thumbs, path)
    {    
        rotateThumbs[index] = true;
        changeThumb( index, 1, num_thumbs, path);
    }
    function thumbStop(index, srco)
    {
        rotateThumbs[index] = false;    
        document.getElementById(index).src = srco;
    }

Now, the problem is for some articles the thumbnails are not in the same location. Example: http: //www.urltoimage1.jpg....http: //www.urltoimageksks16.jpg

I think that, in the existence of this discrepancy, it is better to copy all the urls of the thumbnails to the class of the image, leaving the html in this way:

<img width="189" height="142" src="http: //www.urltoimage8.jpg" class="http: //www.urltoimage1.jpg,http: //www.urltoimage2.jpg,...,http: //www.urltoimageksks16.jpg" id="latest-499" onmouseover="thumbStart" onmouseout="thumbStop('latest-499','http: //www.urltoimage8.jpg');">

Now that I have all the urls in the class of the img tag, how can achieve that the thumbnail rotate?

Thanks

Answer 1

don't store the urls in the class attributes, use Data Attributes instead. (or Data Attributes from jQuery)

something like

<img .. data-thumbnail-url="http: //www.urltoimageksks16.jpg" .. />

if you're using jQuery (you've added it to your tags), you could use directly

var thumbnailSrc = jQuery('img').data('thumbnail');

if you're not using it (since I don't see any jQuery at all in your code) you have to use this instead

var thumbnailSrc = document.getElementById(index).dataset.thumbnail

using that, you could replace your src attribute. you'll probably want to store in data attributes the original src.

About rotating itself (It is not clear if it is part of your question or if you want to know if it is ok to store the urls in class attributes), there are answers for that using jquery, like jQuery animate image rotation You only need to adapt the functionality to be executed on hovering. You could use pure css as well Spin or rotate an image on hover

On a side note, use this

 var rotateThumbs = [];

rather than

 var rotateThumbs = new Array();

See In JavaScript, why is [ ] preferred over new Array();?

READ ALSO
How to translate this JavaScript Code into jQuery?

How to translate this JavaScript Code into jQuery?

I've got some code in JavaScript, that I would like to get translated into jQueryI have been browsing the net for some hours now and tried to figure it out by myself but with no success

291
Getting CORS Errors with Splunk

Getting CORS Errors with Splunk

I am trying to write data to Splunk with a jQuery script running in a browserI already have the following in my 'inputs

482
How to properly format data object that includes array of objects for jQuery ajax put request?

How to properly format data object that includes array of objects for jQuery ajax put request?

I am having trouble sending a data object for a put request in jQuery’s ajax methodI want my data to be formatted like the following example:

192
Dynamically resizing a DIV and iframe (a site inside) at a same time.

Dynamically resizing a DIV and iframe (a site inside) at a same time.

I'm having an issue and trying to figure it out

278