jquery to click through images in a div

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

<img src="/image.php?height=372&image=/slideShow/1302813283.jpg" id="lgImage">

a div for captions

<div id="thecap">

</div>

and a div of thumbnails

<div id="thumbs">
<div id="slideShow"><!--start slideShow-->
<a rel="images/image1.jpg"><img src="images/image1.jpg" alt="Text For Image 1" width="50" height="50" title="something" rel="images/image1.jpg">
<div style="display:none;">
<strong>Header</strong> <br><br>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
</div>
</a>
<a rel="images/image2.jpg"><img src="images/image2.jpg" alt="Text For Image 2" width="50" height="50" title="something" rel="images/image2.jpg">
<div style="display:none;">
<strong>Header</strong> <br><br>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
</div>

</a>
<a rel="images/image3.jpg"><img src="images/image3.jpg" alt="Text For Image 3" width="50" height="50" title="something" rel="images/image3.jpg">
<div style="display:none;">
<strong>Header</strong> <br><br>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
</div>
</a>
<a rel="images/image4.jpg"><img src="images/image4.jpg" alt="Text For Image 4" width="50" height="50" title="something" rel="images/image4.jpg">
<div style="display:none;">
<strong>Header</strong> <br><br>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
</div>
</a>
<!--开发者_如何转开发end slideShow-->
</div>
</div>

and here is my jquery so far.

   $(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);

    });

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?

---

u can use this fancybox jquery plugin but i don't know this plugin will help. u can go previous image and going next image. also it shows images in dialog window.

---

There are numerous slider plugins that you can use such as this: http://sorgalla.com/jcarousel/

Implementing keyboard navigation is easy: Keyboard arrow keys navigation with Easy Slider 1.7
This one supports it out of the box: http://css-tricks.com/examples/AnythingSlider/

You can include captions in the 'sliding' div along with the image.