Question

This is html that looks like can anyone help me out how to add the next and prev buttons to the larger image. Please help me out.

Js:

jQuery(function($) {
    $('#thumbs').delegate('img','click', function(){
        var src = this.src.replace('thumb', 'large');
        $("#largeImage").fadeOut(function() {
            this.src = src;
            $(this).fadeIn();
        });
    });
});

Html:

<div id="page">

  <div id="gallery">

    <div id="panel">
      <img id="largeImage" src="images/image_01_large.jpg" />
    </div>

    <div id="thumbs">
        <img src="images/image_01_thumb.jpg" alt="1st image description" />
        <img src="images/image_02_thumb.jpg" alt="2nd image description" />
        <img src="images/image_03_thumb.jpg" alt="3rd image description" />
        <img src="images/image_04_thumb.jpg" alt="4th image description" />
        <img src="images/image_05_thumb.jpg" alt="5th image description" />
    </div>

  </div>

  <a href="#" id="next">Next</a>
  <br />
  <a href="#" id="prev">Prev</a>

</div>

Answer 1

Without changing your code too much this should work. There are two things to note about how this work:

1. The active thumbnail has a class “active”. So we can easily keep track of which larger image is currently being displayed.

2. It relies on you keeping the id’s of the next and prev tags being named “next” and “prev”, these are used to call the corresponding jQuery functions that get the next and previous DOM elements.

       <div id="thumbs">
           <img class="active" src="images/image_01_thumb.jpg" alt="1st image description" />
           <img src="images/image_02_thumb.jpg" alt="2nd image description" />
           <img src="images/image_03_thumb.jpg" alt="3rd image description" />
           <img src="images/image_04_thumb.jpg" alt="4th image description" />
           <img src="images/image_05_thumb.jpg" alt="5th image description" />     
       </div> 
   </div> 
   <div id="gallery-nav">
       <a href="#" id="next">Next</a> <br /> <a href="#" id="prev">Prev</a>
   </div>
   

   $(function() {

     var thumbs = $('#thumbs'),
         largeImage = $('#largeImage');
   
     thumbs.delegate('img','click', function(){
         var $this = $(this).addClass('active'),
             src = $(this).attr('src').replace('thumb', 'large');
   
         thumbs.find('.active').removeClass('active');
   
         largeImage.fadeOut(function() {
             this.src = src;
             $(this).fadeIn();
         });
     });
   
     $('#gallery-nav a').click(function() {
         var type = $(this).attr('id'),
             thumbImages = thumbs.find('img'),
             next = thumbImages.filter('.active')
                     .removeClass('active')[type]();
   
           if(!next.length) {
               next = type === 'next' ? thumbImages.filter(':first-child') : thumbs.find(':last-child');
           }
   
           var src = next.attr('src').replace('thumb', 'large');
   
         largeImage.attr('src', src);
         next.addClass('active');
     });
   

   });