Image galley with Jquery (click on "next" button)
<p>first of all sorry for my bad grammar as English is not my first language.</p>

<p>Anyway, I'm totally new to Jquery / Javascript.</p>

<p>I'm trying to create an image gallery with image swap effect using Jquery.</p>

<p>What I want to achieve is, when I click on a thumbnail (let's say No. 4), the main image would display image No. 4. Well, I've already successfully written a code for this matter.</p>

<p>Now, there's another thing I want to achieve:</p>

<p>I have a "next"-button. If the main image is displaying image No. 4, clicking on the "next"-button should result in the main image displaying image No. 5. Or, if the main image is displaying image No. 7, clicking on "next"-button would show image No. 8 and so on.</p>

<p>Using the code I've written, clicking on the "next"-button will cause the main image showing the 2nd image. Clicking it again then it shows the 3rd image, but not the next No. from where I clicked the thumbnail.</p>

<p>This is my Array:</p>

<pre><code>var bilder = ["../../images/galerie/assassin_2_01.jpg",
              "../../images/galerie/assassin_2_02.jpg",
              "../../images/galerie/assassin_2_03.jpg",
              "../../images/galerie/assassin_2_04.jpg",
              "../../images/galerie/assassin_2_05.jpg",
              "../../images/galerie/assassin_2_06.jpg",
              "../../images/galerie/assassin_2_07.jpg",
              "../../images/galerie/assassin_2_08.jpg",
              "../../images/galerie/assassin_2_09.jpg",
              "../../images/galerie/assassin_2_10.jpg",
              "../../images/galerie/assassin_2_11.jpg",
              "../../images/galerie/assassin_2_12.jpg",
              "../../images/galerie/assassin_2_13.jpg",
              "../../images/galerie/assassin_2_14.jpg",
              "../../images/galerie/assassin_2_15.jpg"];
</code></pre>

<p>This is my Jquery:</p>

<pre><code>function mainimage(nr) {
    $("div.mainimg ul li:eq(0) div img").fadeOut({"duration":300, complete:function() {
        $(this).attr("src",bilder[nr]).fadeIn(500);
    }});
}
function next() {
    if (index &lt; bilder.length) {
        index++;
        mainimage(index);
    }
}
</code></pre>

<p>And this is my HTML-structure:</p>

<pre><code>&lt;div class="mainimg"&gt;
    &lt;ul&gt;
        &lt;li&gt;&lt;div&gt;&lt;img class="img1" src="../../images/galerie/assassin_2_01.jpg" /&gt;&lt;/div&gt;&lt;/li&gt;
    &lt;/ul&gt;
        &lt;div class="caption"&gt;
            &lt;div&gt;Assassin's Creed 2&lt;/div&gt;
            &lt;div&gt;&lt;a href="#"&gt;back/a&gt;&amp;nbsp;&amp;nbsp;|&amp;nbsp;&amp;nbsp;&lt;a onclick="next();"&gt;next&lt;/a&gt;&lt;/div&gt;
        &lt;/div&gt;
&lt;/div&gt;

&lt;div class="thumbsrow"&gt;
    &lt;div class="galeriethumbs"&gt;&lt;img onclick="mainimage(0);" /&gt;&lt;/div&gt;
    &lt;div class="galeriethumbs"&gt;&lt;img onclick="mainimage(1);" /&gt;&lt;/div&gt;
    &lt;div class="galeriethumbs"&gt;&lt;img onclick="mainimage(2);" /&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div class="thumbsrow"&gt;
    &lt;div class="galeriethumbs"&gt;&lt;img onclick="mainimage(3);" /&gt;&lt;/div&gt;
    &lt;div class="galeriethumbs"&gt;&lt;img onclick="mainimage(4);" /&gt;&lt;/div&gt;
    &lt;div class="galeriethumbs"&gt;&lt;img onclick="mainimage(5);" /&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>I'm thankful for any help!</p>
