单击div中的图像的jquery

Question

如何使用jquery添加按钮控件(下一个和上一个)来单击并显示div中列出的图像？现在我有一个很大的图像

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

标题的div

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

   $(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中随图片一起添加字幕。