Господа, помогите пожалуйста!

[puzjob]

Уважаемые посетители, помогите решить проблему:
имеется код:
<div id="gallery">
<table id="table" border="0">
<tr><td valign="top">
<img src="./img/catalog/host/1/1.jpg" alt="" id="main-img1" />
</td>
<td align="center" valign="top">
<ul>
<li><img src="./img/catalog/host/1/thumb/1.jpg" alt="" width="100" /></li>
<li><img src="./img/catalog/host/1/thumb/2.jpg" alt="" width="100" /></li>
<li><img src="./img/catalog/host/1/thumb/3.jpg" alt="" width="100" /></li>
</ul>
</td>
</tr>
</table>
</div>

и скрипт для него:

<script type="text/JavaScript">
// prepare the form when the DOM is ready 
$(document).ready(function() {
$("#gallery li img").hover(function(){
$('#main-img2').attr('src',$(this).attr('src').replace('thu mb/', ''));
});
var imgSwap = [];
$("#gallery li img").each(function(){
imgUrl = this.src.replace('thumb/', '');
imgSwap.push(imgUrl);
});
$(imgSwap).preload();
});
$.fn.preload = function() {
this.each(function(){
$('<img/>')[0].src = this;
});
}
</script>


Проблема в следующем: Что бы разместить 2 блока с меняющимися картинками необходимо id заменить class, но в таком случае последняя замененная картинка с class="main-img2" появляется во втором блоке. Как сделать 2 таких блока рядом и чтобы они не зависели друг от друга? Можно конечно для каждого из блоков присвоить свой id, но таких блоков будет много и не хотелось бы раздувать код сайта.

В общем как доработать скрипт чтобы можно было разместить много подобных блоков с одним классом?

[raptor-dm]

код выложите на jsfiddle

[klierik]

@puzjob, Ознакомся, пожалуйста, с Правилами, которые тебе настоятельно рекомендовали прочитать при регистрации!