Question

I am creating an image thumbnail slider, As I click on the thumbnail Image a pop-up box with larger Image will be open. Here I need to add the next and prev button to the larger image.

Here it is what I practiced:

HTML

<div id="wrapper">
  <div id="content">
  <div id="content_left">

  </div>
<ul id="thumb_holder">
  <li><a href="javascript:void(0);"><img src="img/img1_thumb.jpg" alt="motherly" /> </a></li>
    <li><a href="javascript:void(0);"><img src="img/img2_thumb.jpg" alt="xo" /> </a></li>
    <li><a href="javascript:void(0);"><img src="img/img3_thumb.jpg" alt="keep your eyes open" /> </a></li>
    <li><a href="javascript:void(0);"><img src="img/img4_thumb.jpg" alt="bacon bits" /> </a></li>
    <li><a href="javascript:void(0);"><img src="img/img5_thumb.jpg" alt="nature sent packing" /> </a></li>
    <li><a href="javascript:void(0);"><img src="img/img6_thumb.jpg" alt="snow man" /> </a></li>
    </ul>
    </div>
    <div id="large_image_holder">
      <ul id="large_images">
        <li><img src="img/img1.jpg" alt="motherly" /></li>
        <li><img src="img/img2.jpg" alt="xo" /></li>
        <li><img src="img/img3.jpg" alt="keep your eyes open" /></li>
        <li><img src="img/img4.jpg" alt="bacon bits" /></li>
        <li><img src="img/img5.jpg" alt="nature sent packing" /></li>
        <li><img src="img/img6.jpg" alt="snow man" /></li>
      </ul>
    </div>

  </div>

</div>

Jquery

$(document).ready (function(){      
    $("#large_images li").each(function(index, element){$(element).attr("class", 'hide');});
    $("#large_images li").each(function(index, element){$(element).attr("id", 'img'+index);});
    $("#thumb_holder li a").each(function(index, element){$(element).attr("rel", 'img'+index);});

    var mainImg ='img0';
    var current = 'img0';

    $('#img0').css('display', 'inline');
    $('#img0').addClass('current');

    $('#thumb_holder li a').click (function(){                                 
        mainImg = $(this).attr('rel');
        if(mainImg != current){
        $('.current').fadeOut('slow');
        $('#'+mainImg).fadeIn('slow', function(){
        $(this).addClass('current');
        current = mainImg;

        });
        }
    });
});

Answer 1

<div id="picture">
    <a id="prev" class="nav"> Next</a>
    <a id="next" class="nav"> Prev</a>
</div>​

And the CSS

a.nav{
    position:absolute;
    top:10px;
    cursor:pointer;
}
#picture a#prev{
    color:red;
    left:10px; 
    /*background: add images for nav buttons if needed*/
}
#picture a#next{
    color:blue;
    right:10px;
}
#picture{
   position:relative;
}

And for the click handler..

$('#picture').on('click', '.nav', function(){
     alert(this.id); //Do what you do in $('#thumb_holder li a').click..
});​

DEMO