title: Change fading image by clicking on link jQuery
body: <p>I created an image fading slideshow reading <a href="http://snook.ca/archives/javascript/simplest-jquery-slideshow/" rel="nofollow">this article</a>.
  The code looks like this:  </p>
  
  <pre><code>$(document).ready(function() {
      $('#iPhoneExample img:gt(0)').hide();
      setInterval(function() {
          $('#iPhoneExample :first-child').fadeOut(1000)
          .next('img').fadeIn(1000)
          .end().appendTo('#iPhoneExample');
      }, 3000);
  });
  </code></pre>
  
  <p>and this is the HTML and CSS:</p>
  
  <pre><code>&lt;div id="iPhoneExample"&gt;
  &lt;img src="photo1.png" alt="" /&gt;
  &lt;img src="photo2.png" alt="" /&gt;
  &lt;img src="photo3.png" alt="" /&gt;
  &lt;img src="photo4.png" alt="" /&gt;
  &lt;img src="photo5.png" alt="" /&gt;
  &lt;img src="photo6.png" alt="" /&gt;
  &lt;/div&gt;
  
  #iPhoneExample {
      width:305px;
      height:597px;
      background:url('immagini/iphoneBg.png') center no-repeat;
      position:relative;
      margin:0px 20px 0px 94px;
  }
  #iPhoneExample img {
      position:absolute;
      top:106px;
      right:22px;
      bottom:104px;
      left:25px;
  }
  </code></pre>
  
  <p>Now I want to do this. When the page loads, the slideshow starts but I have 6 links, one for each image that I want to use to show the corresponding image... For example the slideshow starts and shows photo3 but if I click on photo5 link, the slideshow must show photo5 and then continue to photo6 etc.</p>
  
  <p>I believe I should use the <code>.click</code> function but I don't know what to write inside it. I'm a newbie with jQuery.</p>
  
  <p>Thank you so much for your help!</p>