Carousel based image gallery with thumbnails & Captions

Question

I need something like this for image gallery example with additional feature like showing Image caption & source of image as two separate captions.

I am not sure how to customize it to add two caption under the large image.

fiddle example http://jsfiddle.net/p118my3s/

Any pointer

Sample HTML

<div id="wrapper">
    <div id="prev">
        <a href="#" class="images">&uArr; </a>
        <a href="#" class="thumbs">&uArr; </a>
    </div>
    <div id="images">
        <img src="http://coolcarousels.frebsite.nl/c/6/img/large/ek-aanhanger.gif" alt="ek-aanhanger" width="350" height="350" />
        <img src="http://coolcarousels.frebsite.nl/c/6/img/large/ek-alien.gif" alt="ek-alien" width="350" height="350" />
        <img src="http://coolcarousels.frebsite.nl/c/6/img/large/ek-artsen.gif" alt="ek-artsen" width="350" height="350" />
        <img src="http://coolcarousels.frebsite.nl/c/6/img/large/ek-brandweer.gif" alt="ek-brandweer" width="350" height="350" />
        <img src="http://coolcarousels.frebsite.nl/c/6/img/large/ek-dommel.gif" alt="ek-dommel" width="350" height="350" />
        <img src="http://coolcarousels.frebsite.nl/c/6/img/large/ek-freudiaans.gif" alt="ek-freudiaans" width="350" height="350" />
        <img src="http://coolcarousels.frebsite.nl/c/6/img/large/ek-kamikazepiloot.gif" alt="ek-kamikazepiloot" width="350" height="350" />
        <img src="http://coolcarousels.frebsite.nl/c/6/img/large/ek-langselkaarheen.gif" alt="ek-langselkaarheen" width="350" height="350" />
        <img src="http://coolcarousels.frebsite.nl/c/6/img/large/ek-perswee.gif" alt="ek-perswee" width="350" height="350" />
        <img src="http://coolcarousels.frebsite.nl/c/6/img/large/ek-politiekannietzeggen.gif" alt="ek-politiekannietzeggen" width="350" height="350" />
        <img src="http://coolcarousels.frebsite.nl/c/6/img/large/ek-rollenpatroon.gif" alt="ek-rollenpatroon" width="350" height="350" />
        <img src="http://coolcarousels.frebsite.nl/c/6/img/large/ek-suikerspin.gif" alt="ek-suikerspin" width="350" height="350" />
        <img src="http://coolcarousels.frebsite.nl/c/6/img/large/ek-uitvallen.gif" alt="ek-uitvallen" width="350" height="350" />
        <img src="http://coolcarousels.frebsite.nl/c/6/img/large/ek-vaassen.gif" alt="ek-vaassen" width="350" height="350" />
        <img src="http://coolcarousels.frebsite.nl/c/6/img/large/ek-vreedzaamverzet.gif" alt="ek-vreedzaamverzet" width="350" height="350" />
        <img src="http://coolcarousels.frebsite.nl/c/6/img/large/ek-zelfspotter.gif" alt="ek-zelfspotter" width="350" height="350" />       
    </div>
    <div id="thumbs">
        <img src="http://coolcarousels.frebsite.nl/c/6/img/small/ek-aanhanger.gif" alt="ek-aanhanger" width="70" height="70" />
        <img src="http://coolcarousels.frebsite.nl/c/6/img/small/ek-alien.gif" alt="ek-alien" width="70" height="70" />
        <img src="http://coolcarousels.frebsite.nl/c/6/img/small/ek-artsen.gif" alt="ek-artsen" width="70" height="70" />
        <img src="http://coolcarousels.frebsite.nl/c/6/img/small/ek-brandweer.gif" alt="ek-brandweer" width="70" height="70" />
        <img src="http://coolcarousels.frebsite.nl/c/6/img/small/ek-dommel.gif" alt="ek-dommel" width="70" height="70" />
        <img src="http://coolcarousels.frebsite.nl/c/6/img/small/ek-freudiaans.gif" alt="ek-freudiaans" width="70" height="70" />
        <img src="http://coolcarousels.frebsite.nl/c/6/img/small/ek-kamikazepiloot.gif" alt="ek-kamikazepiloot" width="70" height="70" />
        <img src="http://coolcarousels.frebsite.nl/c/6/img/small/ek-langselkaarheen.gif" alt="ek-langselkaarheen" width="70" height="70" />
        <img src="http://coolcarousels.frebsite.nl/c/6/img/small/ek-perswee.gif" alt="ek-perswee" width="70" height="70" />
        <img src="http://coolcarousels.frebsite.nl/c/6/img/small/ek-politiekannietzeggen.gif" alt="ek-politiekannietzeggen" width="70" height="70" />
        <img src="http://coolcarousels.frebsite.nl/c/6/img/small/ek-rollenpatroon.gif" alt="ek-rollenpatroon" width="70" height="70" />
        <img src="http://coolcarousels.frebsite.nl/c/6/img/small/ek-suikerspin.gif" alt="ek-suikerspin" width="70" height="70" />
        <img src="http://coolcarousels.frebsite.nl/c/6/img/small/ek-uitvallen.gif" alt="ek-uitvallen" width="70" height="70" />
        <img src="http://coolcarousels.frebsite.nl/c/6/img/small/ek-vaassen.gif" alt="ek-vaassen" width="70" height="70" />
        <img src="http://coolcarousels.frebsite.nl/c/6/img/small/ek-vreedzaamverzet.gif" alt="ek-vreedzaamverzet" width="70" height="70" />
        <img src="http://coolcarousels.frebsite.nl/c/6/img/small/ek-zelfspotter.gif" alt="ek-zelfspotter" width="70" height="70" />
    </div>
    <div id="next">
        <a href="#" class="images">&dArr; </a>
        <a href="#" class="thumbs">&dArr; </a>
    </div>
</div>

Answer 1

Since you are using jquery you could add caption to each picture by index and show/hide like so:

DEMO

$(this).click(function () {
    $('#images').trigger('slideTo', [i, 0, true]);
    $('#captions .caption').hide();
    $('#captions .caption'+i).show();
});