CODEWITHSUNDEEP
javascriptjqueryhtml
Ivan Miranda
Ivan Miranda

Reputation: 36

Rotate Thumbnails in MouseOver and Stop Rotate in Mouseleave

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

Upvotes: 0

Views: 135

Answers (1)

Gonzalo.-
Gonzalo.-

Reputation: 12682

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();?

Upvotes: 1

Related Questions