title: jquery iterate list images with timer and hover
body: <p>I have a list where li's have img's.  The images are thumbnails and there is another div where the large version of the thumbs should be iterated through.  Also when the user wands over the thumbnail the large image iteration should halt and display what is hovered over. </p>
  
  <p>My hover stuff is working but the iterating &amp; timing is not.  I'm missing something and not surprised as this is really pushing the limits of my capabilities of noob static pages!</p>
  
  <p>simple html:</p>
  
  <pre><code>&lt;ul&gt;
   &lt;li&gt;&lt;img src='blah' /&gt;text&lt;/li&gt;
   &lt;li&gt;&lt;img src='blah' /&gt;text&lt;/li&gt;
  &lt;/ul&gt;
  &lt;div ='big'&gt;&lt;/div&gt;
  </code></pre>
  
  <p>jquery:</p>
  
  <pre><code>$(document).ready(function(){
  
      $('li img').each(function (i) {
          var thumb = $(this).attr("src");
          setTimeout(function () { 
              $('#big').html('&lt;img src=' + thumb + '/&gt;');
  
              }, 5000 * (i + 1));
      });
  
      imgHov();
  
  });
  
  function imgHov(){
      $('li img').hover(
          function(){
              $('#big').html('&lt;img src=' + $(this).attr("src") + '/&gt;');
          },
          function(){
              $('#big').html("");
          }
          );
  
  };
  </code></pre>
  
  <p>I'm up for completely reconstructing this thing; i've tried using jquery .map() and other ways of turning the list into an array instead of .each.  Let me know the direction you experts would go with this.  Thanks!</p>