ebay style gallery issue - html

Question

So I need help if this is even possible, going to try to be as detailed as possible so you guys understand my problem. I found a simple ebay style gallery code that I want to incorporate into my website i'm making. heres the code
<table width="500" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="width: 400px; vertical-align: top;">
<img src="1_large.jpg" width="398" height="299" alt="Large Photo" style="border: 1px solid #000000;" name="swap">
</td>
<td style="width: 6px;"></td>
<td style="width: 94px; vertical-align: top;">
<img src="1_small.jpg" width="92" height="69" alt="Small Photo" style="border: 1px solid #000000; margin-bottom: 3px;" onmousedown="document.swap.src='1_large.jpg';">
<br>
<img src="2_small.jpg" width="92" height="69" alt="Small Photo" style="border: 1px solid #000000; margin-bottom: 3px;" onmousedown="document.swap.src='2_large.jpg';">
<br>
<img src="3_small.jpg" width="92" height="69" alt="Small Photo" style="border: 1px solid #000000; margin-bottom: 3px;" onmousedown="document.swap.src='3_large.jpg';">
</td>
</tr>
</table>
I also have a slimbox2 addon into my site, link is here if anyone doesnt know what that is. slimbox2
so all i need to do is add this
<a href="images/1_large.jpg" rel="lightbox"><img src=........./>
to allow the image to expand into a larger preview using slimbox, my problem is, if i add it to main image that says "1_large.jpg" the href link is still linked to that specific image, regardless if I "swap" it when i click on another image
for example, i have 3 images in the gallery. the first image is already loaded into the big preview of the ebay style gallery, when i click on image 3, it gets swapped out to the big preview of the ebay style, now i want to expand it and see the image a lot bigger (this is where slimbox comes in) but once i click the big preview, the image gets expanded, but image 1 gets loaded, not image 3.
hopefully i made the problem clear, if anyone can help that would be fantastic!
all in all, im looking for a photo gallery similar to neweggs website for viewing products

Answer 1

Is this the functionality you're looking for? - FIDDLE
HTML
<div class='bigpic'></div>
<div class='rightbar'>
<div class='littlepic'><img src='http://img4.wikia.nocookie.net/__cb20130310121325/youtubepoop/images/c/c0/Goofy_Yop.jpg' /></div>
<div class='littlepic'>
<img src='http://img4.wikia.nocookie.net/__cb20130706024933/disney/images/8/88/Mickey-Mouse-High-Resolution-Wallpapers.stillmaza.com-1.jpg' /></div>
<div class='littlepic'><img src='http://images.wikia.com/disney/images/archive/7/71/20121205062928!Donald-duck-disney-photo-450x400-dcp-cpna013154.jpg' /></div>
</div>
CSS
.bigpic {
float: left;
width: 400px;
height: 300px;
border: 1px solid black;
overflow: hidden;
}
.bigpic img {
width: 400px;
height: 300px;
}
.rightbar {
float: left;
width: 110px;
margin-left: 5px;
}
.littlepic {
width: 100px;
height: 80px;
border: 1px solid black;
margin-bottom: 5px;
overflow: hidden;
}
.littlepic img {
width: 100%;
}
JS
$('.littlepic img').on('click', function(){
$('.bigpic').html('');
$(this).clone().appendTo('.bigpic');
});
Edit:
<script>
$(document).ready(function(){
$('.rightbar .littlepic:first-child img').clone().appendTo('.bigpic');
$('.littlepic img').on('click', function(){
$('.bigpic').html('');
$(this).clone().appendTo('.bigpic');
});//end click
});//end ready
</script>
</body>
</html>