CODEWITHSUNDEEP
javascriptjquery
Khelben
Khelben

Reputation: 23

Loop through images on hover

I have something like this :

<a href="/url_to_gallery_1"><img src="image_1.jpg" data-alt-src="image_2.jpg;image_3.jpg;image_4.jpg" class="img-loop"></a>
<a href="/url_to_gallery_2"><img src="image_A.jpg" data-alt-src="image_B.jpg;image_C.jpg" class="img-loop"></a>

I want the image to change on hover, and loop through all the alternative ones, with a change every second or so. I want it to start again once at the end, and the original image should be back after the hover.
Basically, something like this :
Img 1 --> start hover --> Img 2, 3, 4, 1, 2… (with a pause between every change) --> end hover --> Img 1

(I simplified for the exemple, but the actual URLs won't be in sequence. I also don't know in advance how many images there will be in data-alt-src, there may even be none.)

So far I have this :

$('img.img-loop')
.mouseover(function() {
    $(this).data('old-src', $(this).attr('src'));
    var alt_src = $(this).data('alt-src').split(';');

    var i;
    for (i = 0; i < alt_src.length; i++) {
        $(this).attr('src', alt_src[i]);
    }
})
.mouseout(function() {
    $(this).attr('src', $(this).data('old-src'));
});

I'm stuck with the delay between images. I've tried using setInterval and setTimeout, but so far without success.

I should also mention that I actually do not want any kind of preload (there will be several gallery links, so every preview image of every gallery… that's gonna be a lot).

Upvotes: 2

Views: 2593

Answers (2)

cFreed
cFreed

Reputation: 4484

Here is a suggested way to achieve it:

var alt_val, elem, i, timeout;

$('input.img-loop')
  .mouseenter(function() {
    $(this).data('old-val', this.value);
    elem = this;
    alt_val = $(this).data('alt-val').split(';');
    i = 0;
    timeout = setTimeout(loop, 500);
  })
  .mouseout(function() {
    clearTimeout(timeout);
    this.value = $(this).data('old-val');
  });
  
function loop() {
  if (i === alt_val.length) {
    elem.value = $(elem).data('old-val');
    i = 0;
  } else {
    elem.value = alt_val[i++];
  }
  timeout = setTimeout(loop, 500);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="/url_to_gallery_1"><input value="image_1.jpg" data-alt-val="image_2.jpg;image_3.jpg;image_4.jpg" class="img-loop"></a>
<a href="/url_to_gallery_2"><input value="image_A.jpg" data-alt-val="image_B.jpg;image_C.jpg" class="img-loop"></a>

In order to make it illustrative here without using images I replaced any <img> by <input>, so src becomes value.

Note that, fortunately, we don't need to have distinct lots of data (alt_val, elem, i, and timeout) for each series because, due to your requirements (stop when mouseout), they're never working both at the same time.

The only noticeable point is: using mouseenter rather than mouseover to get rid of any side effect.

Upvotes: 0

Louys Patrice Bessette
Louys Patrice Bessette

Reputation: 33933

You can do this using an interval...
Like this:

var myInterval;  // Declare it on global scope.

$('img.img-loop')
    .mouseover(function() {
    $(this).data('old-src', $(this).attr('src'));
    var alt_src = $(this).data('alt-src').split(';');

    /*  Removed this part...
        var i;
        for (i = 0; i < alt_src.length; i++) {
            $(this).attr('src', alt_src[i]);
        }
        */
    var that = $(this);
    var i=0;
    myInterval = setInterval(function(){  // Set an interval
        if(i==alt_src.length){
            i=0;
            that.attr("src", that.data('old-src'));
        }else{
            that.attr('src', alt_src[i]);
            i++;
        }
    },800);  // Interval delay in millisecs.
})
    .mouseout(function() {
    clearInterval(myInterval);  // Clear the interval
    $(this).attr('src', $(this).data('old-src'));
});
img{
    width:150px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="/url_to_gallery_1"><img src="http://www.psdgraphics.com/file/red-number-1.jpg" data-alt-src="http://www.psdgraphics.com/file/red-number-2.jpg;
    http://www.psdgraphics.com/file/red-number-3.jpg;
    http://www.psdgraphics.com/file/red-number-4.jpg" class="img-loop"></a>
<a href="/url_to_gallery_2"><img src="http://pix.iemoji.com/images/emoji/apple/ios-9/256/negative-squared-latin-capital-letter-a.png" data-alt-src="http://downloadicons.net/sites/default/files/latin-capital-letter-b-icon-52996.png;
    http://downloadicons.net/sites/default/files/capital-letter-c-icon-52997.png" class="img-loop"></a>

Upvotes: 2

Related Questions