Simple Gallery Layout for Videos [jQuery]

Question

<ul id="thumb">
    <li class="active"><a href="#"><img src="img/thumb1.png" alt="" /></a></li>
    <li><a href="#"><img src="img/thumb2.png" alt="" /></a></li>
    <li><a href="#"><img src="img/thumb3.png" alt="" /></a></li>
    <li><a href="#"><img src="img/thumb4.png" alt="" /></a></li>
</ul>

<div id="video-display">
    <div class="video video-1 active"> Flash Video Object Here </div>
    <div class="video video-2"> Flash Video Object Here </div>
    <div class="video video-3"> Flash Video Object Here </div>
    <div class="video video-4"> Flash Video Object Here </div>
</div>

First thumbnail and first video are active by default, clicking on second shows the second video and hides all other... How do I code this simple gallery in jQuery.

I'd really appreciate any help.

Thanks!

Answer 1

You can do it using .index() and .eq() like this:

$("#video-display .video:gt(0)").hide();
$("#thumb li").click(function() {
    $("#video-display .video").hide().eq($(this).index()).show();
});​​​​​​​​​​​​​

You can try it out here, if you want move the .active class around, just add a few .addClass() and .removeClass() calls, like this:

$("#video-display .video:not(.active)").hide();                  //hide initially
$("#thumb li").click(function() {
    $(this).addClass('active').siblings().removeClass('active'); //<li> portion
    $("#video-display .video").hide().removeClas('active')       //hide previous
       .eq($(this).index()).show().addClass('active');           //show new
});​​​​​​​​​​​​​

The approach in both is to select the video <div> at the same index inside #video-display as the index of the <li> you clicked inside #thumb.