jquery to click through images in a div
<p>How can i add button control (next and previous) to click through and display images listed in a div with jquery?  Right now i have a big image</p>

<pre><code>&lt;img src="/image.php?height=372&amp;image=/slideShow/1302813283.jpg" id="lgImage"&gt;
</code></pre>

<p>a div for captions</p>

<pre><code>&lt;div id="thecap"&gt;

&lt;/div&gt;
</code></pre>

<p>and a div of thumbnails</p>

<pre><code>&lt;div id="thumbs"&gt;
&lt;div id="slideShow"&gt;&lt;!--start slideShow--&gt;
&lt;a rel="images/image1.jpg"&gt;&lt;img src="images/image1.jpg" alt="Text For Image 1" width="50" height="50" title="something" rel="images/image1.jpg"&gt;
&lt;div style="display:none;"&gt;
&lt;strong&gt;Header&lt;/strong&gt; &lt;br&gt;&lt;br&gt;lsfjas;ld jaslj ljs f;lkajsd ;fkjas ;dfja;sdklf a;sljfa;lsdkjf a;sdklfj a;lskdfja;sklfj a;lksdfj a;klsfj a;klsfj a;lskfj a;lsfj
&lt;/div&gt;
&lt;/a&gt;
&lt;a rel="images/image2.jpg"&gt;&lt;img src="images/image2.jpg" alt="Text For Image 2" width="50" height="50" title="something" rel="images/image2.jpg"&gt;
&lt;div style="display:none;"&gt;
&lt;strong&gt;Header&lt;/strong&gt; &lt;br&gt;&lt;br&gt;lsfjas;ld jaslj ljs f;lkajsd ;fkjas ;dfja;sdklf a;sljfa;lsdkjf a;sdklfj a;lskdfja;sklfj a;lksdfj a;klsfj a;klsfj a;lskfj a;lsfj
&lt;/div&gt;

&lt;/a&gt;
&lt;a rel="images/image3.jpg"&gt;&lt;img src="images/image3.jpg" alt="Text For Image 3" width="50" height="50" title="something" rel="images/image3.jpg"&gt;
&lt;div style="display:none;"&gt;
&lt;strong&gt;Header&lt;/strong&gt; &lt;br&gt;&lt;br&gt;lsfjas;ld jaslj ljs f;lkajsd ;fkjas ;dfja;sdklf a;sljfa;lsdkjf a;sdklfj a;lskdfja;sklfj a;lksdfj a;klsfj a;klsfj a;lskfj a;lsfj
&lt;/div&gt;
&lt;/a&gt;
&lt;a rel="images/image4.jpg"&gt;&lt;img src="images/image4.jpg" alt="Text For Image 4" width="50" height="50" title="something" rel="images/image4.jpg"&gt;
&lt;div style="display:none;"&gt;
&lt;strong&gt;Header&lt;/strong&gt; &lt;br&gt;&lt;br&gt;lsfjas;ld jaslj ljs f;lkajsd ;fkjas ;dfja;sdklf a;sljfa;lsdkjf a;sdklfj a;lskdfja;sklfj a;lksdfj a;klsfj a;klsfj a;lskfj a;lsfj
&lt;/div&gt;
&lt;/a&gt;
&lt;!--end slideShow--&gt;
&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>and here is my jquery so far.</p>

<pre><code>   $(document).ready(function() {
    $("#slideShow a").click(function() {
    var imgTitle = $(this).children('div').html(); // Find the image title
    $("#thecap").html(' ' + imgTitle + ' ');


    $("#lgImage").attr('src', $(this).children('img').attr('rel'));
    $("#lgImage").css("display","none");
    $("#lgImage").fadeIn(1500);

    $("#thecap").css("display","none");
    $("#thecap").fadeIn(1500);

    });
</code></pre>

<p>if i click a thumbnail the big image changes and so does the caption.  I want to add a left and right arrow button control to click through (next or previous) with jquery.  Any Thoughts?</p>
