Question

GOAL:
Create element which will display current big image and few thumbnails. When somebody click on thumbnail, current big image needs to be replaced with clicked one. Shadowbox should work only on big image. If there are few images (thumbnails) shadowbox must contain all three big images (not to display only one).

ISSUES:
While code bellow work, it still have some issues to be fixed.

1. On first load, when I click on thumbnail, main big image in #panel is firstly replaced with thumbnail, and then after ~1 second is replaced with normal big one. So big image should be first preloaded on click and then appended to #panel or something similar.
2. rel attribute is somehow lost in replacing. When there is a new image appended to #panel it looks like it loose rel attribute (shadowbox not work)
3. Clicking on thumbnails load shadowbox which should be prevented. Shadowbox should be loaded only when there is a click on big image in #panel. When somebody click on that big image shadowbox should load all big images. This may be tricky and may require changed html code.

WORKING DEMO
Demo no longer work

HTML:

<div id="panel">
  <a href="path_to_image1.jpg" rel="shadowbox[page]">
   <img src="scripts/timthumb.php?src=path_to_image1.jpg&w=200&h=20" alt="Image name1" />
  </a>
</div>

<div id="thumbs">
  <a href="path_to_image1.jpg" rel="shadowbox[page]">
   <img src="scripts/timthumb.php?src=path_to_image1.jpg&w=30&h=30" alt="Image name1" />
  </a>
  <a href="path_to_image2.jpg" rel="shadowbox[page]">
   <img src="scripts/timthumb.php?src=path_to_image2.jpg&w=30&h=30" alt="Image name2" />
  </a>
  <a href="path_to_image3.jpg" rel="shadowbox[page]">
   <img src="scripts/timthumb.php?src=path_to_image3.jpg&w=30&h=30" alt="Image name3" />
  </a>
</div>

JS:

$('#thumbs a').click(function(evt) {
  evt.preventDefault();
  var clickedElement = $(this).clone().find('img').attr('src', function(i, src){
    return src.replace('w=30&h=30', 'w=200&h=200')
  }).end();
  $('#panel').html(clickedElement);
});

Answer 1

I found http://slidesjs.com/ which have exactly the same functionality which i wanted to achieve. I would like to thank everyone who tried to help me.