title: Returning a variable to use within another function in JQuery
body: <p>I'm making an image gallery, when I click a button I can scroll through to the next image.</p>
  
  <p>I also have the option to 'jump' to a specific image. This all works fine.</p>
  
  <p>However, if I scroll regularly to image 3, then jump to image 7. Once I click the next button, I don't go to image 8 as I would like to - I go to image 4. Because there are two separate functions, and I can't/ don't know how to pass the variable between them. I understand I can use a global variable outside of both functions, but this seems to be discouraged.</p>
  
  <p>Here's an example:</p>
  
  <pre><code>var i = 0;
  // i is a global variable
  
  $("#next_button").click(function(){
     $(".all_images").eq(i).show();
     i++;
  });
  </code></pre>
  
  <p>This would correctly increment through all of my images.</p>
  
  <pre><code>$(".thumbnails").click(function(){
      var x = $(this).index();
      $(".all_images:visible").hide();
      $(".all_images").eq(x).show();
  
  i = x;
  });
  </code></pre>
  
  <p>This shows the image relative to the thumbnail I have clicked.</p>
  
  <p>So, how do I use the 'i' variable from the first function in the second function? This has always confused me. It just seems simpler to use a global variable so each function can change the value of i and use it when necessary. Please enlighten me.</p>
  
  <p>Also, as I understand it's possible to wrap JQuery code in a regular JavaScript functions. It seems, however, that my code doesn't work when I wrap a JQuery .click in a regular JavaScript function (ie my_Function(){ ....$("#something").click....   }</p>
  
  <p>Can anybody explain what I am doing wrong?</p>