Разработка простой галереи на JQuery со списком миниатюр. Переход между изображениями должен производится как при нажатии кнопок управления "вперед" и "назад", так и нажатии на миниатюру.

HTML разметка

<div class="gallery-box">
    <div class="view">
        <div class="big-image"><img src="images/img11.jpg" alt="image11"></div>
        <a href="#" class="prev"></a>
        <a href="#" class="next"></a>
    </div>
 
    <div class="thumbnails">
        <a href="images/img1.jpg" class="active"><img src="images/img11.jpg" alt="image11"></a>
        <a href="images/img2.jpg"><img src="images/img12.jpg" alt="image12"></a>
        <a href="images/img3.jpg"><img src="images/img13.jpg" alt="image13"></a>
        <a href="images/img4.jpg"><img src="images/img14.jpg" alt="image14"></a>
        <a href="images/img5.jpg"><img src="images/img15.jpg" alt="image15"></a>
        <a href="images/img6.jpg"><img src="images/img16.jpg" alt="image16"></a>
        <a href="images/img7.jpg"><img src="images/img17.jpg" alt="image17"></a>
        <a href="images/img8.jpg"><img src="images/img18.jpg" alt="image18"></a>
        <a href="images/img9.jpg"><img src="images/img19.jpg" alt="image19"></a>
        <a href="images/img10.jpg"><img src="images/img20.jpg" alt="image20"></a>
    </div>
</div>

CSS стили

.gallery-box{
  width:600px;
  padding:25px 0 0;
  margin:0 auto;
}
.view{
  position:relative;
  margin:0 0 5px;
}
.big-image img{
  display:block;
  width:600px;
  height:300px;
}
.prev, .next{
  position:absolute;  
  width:40px;
  height:40px;
}
.prev{
  bottom:20px;
  left:20px;
  background:url(../images/controls.png) no-repeat 0 0;
}
.next{
  bottom:20px;
  right:20px;
  background:url(../images/controls.png) no-repeat -48px 0;
}
 
.thumbnails{
  width:605px;
}
.thumbnails a{
  float:left;
  margin:0 5px 0 0;
}
.thumbnails a img{
  width:142px;
  height:80px;
  border: 2px solid transparent;
  display:block;
}
.thumbnails .active img{
  border-color:#069;
}

Скрипт

Работа скрипта делится на 3 основных блока:

- обработка нажатия на кнопку "назад"
- обработка нажатия на кнопку "вперед"
- обработка нажатия на миниатюру изображения.

$(function(){
  $('.thumbnails a').click(function(){                                   // При нажатиина миниатюру
    var images = $(this).find('img');
    var imgSrc = images.attr('src');
 
    $(".big-image img").attr({ src: imgSrc });                         // Подменяем адрес большого изображения на адрес выбранного
    $(this).siblings('a').removeClass('active');                       // Удаляем класс .active со ссылки чтоб убрать рамку
    images.parent().addClass('active');                                // Добавляем класс .active на выбранную миниатюру
    return false;
  });
 
  $('.next').click(function(){                                           // При нажатии на кнопку "вперед"
    var count = $('.thumbnails a').length;                             // Общее количество изображений
    var n = parseInt($('.thumbnails a').index($('.active')) + 1);      // Порядковый номер текущего изображения
    var activeImg = $('.thumbnails .active');                          // Активное на данный момент изображение
    var nextSrc;
 
    if (count != n){                                                   // - Если изображение не последнее
      nextSrc = activeImg.next().find('img').attr('src');            // В переменную записывается адрес следующего изображения
      $('.thumbnails .active').removeClass('active');                // Удаляется класс .active с предыдущей миниатюры
      activeImg.next().addClass('active');                           // На миниатюру следующего изображения вешается класс .active
    }else{                                                             // - Если текущее изображение последнее в списке
      nextSrc = $('.thumbnails a').first().find('img').attr('src');  // В переменную записывается адрес первого изображения
      $('.thumbnails .active').removeClass('active');                // Удаляется класс .active с предыдущей миниатюры
      $('.thumbnails a').first().addClass('active');                 // На первую миниатюру вешается класс .active
    }
    $('.big-image img').attr({ src: nextSrc });                        // Подменяем адрес большого изображения на адрес следующего
    return false;
  });
 
 
  $('.prev').click(function(){                                           // При нажатии на кнопку "назад"
    var count = $('.thumbnails a').length;                             // Общее количество изображений
    var n = parseInt($('.thumbnails a').index($('.active')) + 1);      // Порядковый номер текущего изображения
    var activeImg = $('.thumbnails .active');                          // Активное на данный момент изображение
    var prevSrc;
 
    if (n != 1){                                                       // - Если текущее изображение не первое
      prevSrc = activeImg.prev().find('img').attr('src');            // В переменную записывается адрес предыдущего изображения           
      $('.thumbnails .active').removeClass('active');                // Удаляется класс .active активной до этого миниатюры
      activeImg.prev().addClass('active');                           // На миниатюру изображения слева вешается класс .active
    }else{                                                             // - Если текущее изображение первое
      prevSrc = $('.thumbnails a:last').find('img').attr('src');     // В переменную записывается адрес последнего изображения
      $('.thumbnails .active').removeClass('active');                // Удаляется класс .active с предыдущей миниатюры
      $('.thumbnails a:last').addClass('active');                    // На последнюю миниатюру вешается класс .active
    }
    $('.big-image img').attr({ src: prevSrc });                        // Подменяется адрес большого изображения на адрес следующего
    return false;
  });
})

Пример работы галереи на JQuery.