<!--Контейнер в котором мы будем отображать большую картинку-->
<div id="img_container"><img src="" width="700px"></div>
<!--Контейнер с миниатюрами-->
<div class="in">
<img src="http://site.in/sites/default/files/alien.jpg">
</div>

.in {

  padding: 5px 5px 5px 5px;

  }

/* Отображение миниатюр */

  .in img {

  width:300px;

  border: 5px solid #ccc;

  }

/* Выделение миниатюры при наведении */

  .in img:hover {

  width:300px;

  border: 5px solid red;

  cursor: pointer;

  }

/* Скрытый контейнер с большим изображением */

  #img_container {

  position: absolute;

  display: none;

  left: 50%;

  margin-left: -350px;

  z-index: 999;

  top: 100px;
}

/* Бордюр изображения */
  #img_container img { border: 2px solid red; }  
  

$(document).ready(function() {  

   

// При клике на миниатюру

  $('.in img').click(function()

  {

// Берем свойство SRC миниатюры

// (можно картинку положить в ссылку и брать значение href

// для того, чтобы не грузить большие картинки изначально

// а загружать сначало миниатюры и только при клике открывать

// большое изображение, что будет целесообразнее).

  var imgSrc = $(this).attr("src");

// Задаем свойство SRC картинке, которая в скрытом диве.

  $('#img_container img').attr({src: imgSrc});

// Показываем скрытый контейнер

  $('#img_container').fadeIn('slow');

  });

// По клику на большое изображение, скрываем его
$('#img_container').click(function()
{
  $(this).fadeOut();
  });
});