CODEWITHSUNDEEP
javascriptjqueryhtml
nCore
nCore

Reputation: 2087

image gallery select with description when clicked

I'm trying to create a gallery with thumbnails so when you click a thumbnail it will appear on the top make it big with different description. Image shows correctly but I don't know how to show the 'span' to the right.

Can anyone make this js better.

http://jsfiddle.net/Qhdaz/2/

$(function(){
    $("#big-image img:eq(0)").nextAll().hide();
    $(".small-images img").click(function(e){
        var index = $(this).index();
        $("#big-image img").eq(index).show().siblings().hide();
    });
});

Upvotes: 2

Views: 330

Answers (1)

Joy
Joy

Reputation: 9550

Just like: JSFiddle:

<div id="big-image">
    <p><img src="http://lorempixel.com/400/200/sports/1/"><span>Image One</span></p>
    <p><img src="http://lorempixel.com/400/200/fashion/1/"><span>Image Two</span></p>
    <p><img src="http://lorempixel.com/400/200/city/1/"><span>Image Three</span></p>
</div>

And JS: $("#big-image p").eq(index).show().siblings().hide();

Upvotes: 1

Related Questions