jquery点击通过div中的图像

Question

如何添加按钮控件（下一个和上一个）来点击并显示在jquery div中列出的图像？现在我有一个大的图像

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

的字幕

<div id="thecap"> 

</div> 

一个div和缩略图

<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> 

这里是我的jQuery至今的一个div。

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

    }); 

如果我点击缩略图，大图像变化，标题也变化。我想添加一个左右箭头按钮控件来通过jquery点击（下一个或上一个）。有什么想法吗？

Answer 1

你可以使用这个fancybox jquery插件，但我不知道这个插件将有所帮助。你可以去以前的形象和去下一个图像。它也会在对话窗口中显示图像。

Answer 2

有，你可以使用像这样大量的滑块插件： http://sorgalla.com/jcarousel/

实现键盘导航很简单：Keyboard arrow keys navigation with Easy Slider 1.7
这一个支持它的开箱：http://css-tricks.com/examples/AnythingSlider/

可以包括字幕在'滑动'div与图像一起。