Question

Situation: We’ve got this DIV with thumbnails who need their src being changed on hover:

<div id="moreVideos">
<span class="mb">
    <a href="#" onclick="javascript:loadAndPlayVideo('qrO4YZeyl0I');return false;" class="ml">
        <img src="http://i.ytimg.com/vi/qrO4YZeyl0I/default.jpg" id="thumb_qrO4YZeyl0I" class="mvThumb" title="Lady Gaga - Bad Romance">
    </a
</span>
<span class="mb">
    <a class="ml" onclick="javascript:loadAndPlayVideo('niqrrmev4mA');return false;" href="#">
        <img title="Lady Gaga - Alejandro" class="mvThumb" id="thumb_niqrrmev4mA" src="http://i.ytimg.com/vi/niqrrmev4mA/default.jpg">
    </a>
</span>
<span class="mb">
    <a href="#" onclick="javascript:loadAndPlayVideo('qrO4YZeyl0I');return false;" class="ml">
        <img src="http://i.ytimg.com/vi/qrO4YZeyl0I/default.jpg" id="thumb_qrO4YZeyl0I" class="mvThumb" title="Lady Gaga - Bad Romance">
    </a
</span>
<span class="mb">
    <a class="ml" onclick="javascript:loadAndPlayVideo('niqrrmev4mA');return false;" href="#">
        <img title="Lady Gaga - Alejandro" class="mvThumb" id="thumb_niqrrmev4mA" src="http://i.ytimg.com/vi/niqrrmev4mA/default.jpg">
    </a>
</span>

Problem: On thumbnail hover we need to change the thumbnail src every 2 seconds from default.jpg -> 1.jpg -> 2.jpg -> 3.jpg -> default.jpg (loop through them while the mouse is hovering the thumb, after mouse out it need to stop and stay on the current image)

What I’ve tried: Plenty of sample codes from other websites and the JQuery cycle plugin. Trying to use this solution failed: jquery continuous animation on mouseover

Will be used on: http://ListAndPlay.com

I’m very curious in how you would solve a problem like this :)!

Answer 1

Try this (demo)… I also extracted out the inline call to loadAndPlayVideo:

$(document).ready(function(){

 $('a.ml').click(function(){
  loadAndPlayVideo( $(this).find('img').attr('id').replace(/thumb_/,'') );
  return false;
 });

 var timer,
  count = 0,
  cycle = function(el){
    var s = el.attr('src'),
     root = s.substring( 0, s.lastIndexOf('/') + 1 );
    count = (count+1)%4;
    el.attr('src', root + ((count===0) ? 'default' : count) + '.jpg');
 };

 $('.mb img').hover(function(){
   var $this = $(this);
   cycle($this);
   timer = setInterval(function(){ cycle($this); }, 1000);
 }, function(){
   clearInterval(timer);
 });

});

HTML

<!-- changed the "moreVideos" id to class, assuming you'll have more than one block -->
<div class="moreVideos"> 
<span class="mb">
    <a class="ml" href="#">
        <img src="http://i.ytimg.com/vi/qrO4YZeyl0I/default.jpg" id="thumb_qrO4YZeyl0I" class="mvThumb" title="Lady Gaga - Bad Romance">
    </a
</span>
<span class="mb">
    <a class="ml" href="#">
        <img title="Lady Gaga - Alejandro" class="mvThumb" id="thumb_niqrrmev4mA" src="http://i.ytimg.com/vi/niqrrmev4mA/default.jpg">
    </a>
</span>
<span class="mb">
    <a class="ml" href="#">
        <img src="http://i.ytimg.com/vi/qrO4YZeyl0I/default.jpg" id="thumb_qrO4YZeyl0I" class="mvThumb" title="Lady Gaga - Bad Romance">
    </a
</span>
<span class="mb">
    <a class="ml" href="#">
        <img title="Lady Gaga - Alejandro" class="mvThumb" id="thumb_niqrrmev4mA" src="http://i.ytimg.com/vi/niqrrmev4mA/default.jpg">
    </a>
</span>

---

Update: To have a variable number of thumbs for each image, I updated the demo too allow you to add a data-thumbs attribute containing either the file name (if all thumbs use the same root url), or full urls for each thumb.

<img src="http://i.ytimg.com/vi/qrO4YZeyl0I/default.jpg" data-thumbs="default.jpg, 1.jpg, http://i.ytimg.com/vi/qrO4YZeyl0I/2.jpg, 3.jpg" id="thumb_qrO4YZeyl0I" class="mvThumb" title="Lady Gaga - Bad Romance">

For example, the above image will only work if the url for thumb “2.jpg” has the same root (http://i.ytimg.com/vi/qrO4YZeyl0I/) as used in the “src” attribute because the code is modifying the url of the currently shown url. For images in different locations, use the full url for each thumb inside the data-thumbs attribute.

$(function() {

  $('a.ml').click(function() {
    loadAndPlayVideo($(this).find('img').attr('id').replace(/thumb_/, ''));
    return false;
  });

  var timer;

  function cycle(el) {
    var s = el.attr('src'),
      root = s.substring(0, s.lastIndexOf('/') + 1),
      files = el.attr('data-thumbs').split(/\s*,\s*/),
      count = parseInt(el.attr('data-count'), 10) || 0;
    count = (count + 1) % files.length;
    el.attr({
      'src': files[count].indexOf('http') > -1 ? files[count] : root + files[count],
      'data-count': count
    });
  }

  $('.mb img').hover(function() {
    var $this = $(this);
    cycle($this);
    timer = setInterval(function() {
      cycle($this);
    }, 1000);
  }, function() {
    clearInterval(timer);
  });

});