Tooltip картинок товаров в категории

[DenDi 1]

вопрос пытаюсь реализовать вот такую конструкцию при наведении мышки на картинку в категории товаров появлялась бы увеличенная картинка товара. реализую по такой схеме http://vremenno.net/js/moptip-and-mopbox-for-jquery/

вопрос при использовании переменной <div class="image"><a href="<?php echo $product['href']; ?>"><img src="<?php echo $product['thumb']; ?>" title="<?php echo $product['name']; ?>" alt="<?php echo $product['name']; ?>" /></a></div>

которая по сути должна подставлять картинки, картинки всплывают все работает но у всех товаров выводится одна и та же которая стоит первой в категории... что делаю не так?

и как быть с видом "сетка" я так понял по коду полноценного когда элементов там нет а меняется он функцией которая добавляет строки в "список" как сделать отображение картинок и там тоже

[DenDi 1]

вот весь код подскажите что не так делаю?

<!-- Начало Tooltip -->

<script type="text/javascript" src="moptip/jquery.js"></script>

<script type="text/javascript" src="moptip/mop-tip.js"></script>

<script type="text/javascript" src="moptip/jquery-png-fix.js"></script>

<style type="text/css">

.demo-out{display:none;}

</style>

<link rel="stylesheet" type="text/css" href="moptip/mop-tip.css" />

<script type="text/javascript">

$(document).ready(function(){

$(".demo-in").mopTip({

'w': 150,

'style': 'overOut',

'get': '.demo-out'

});

});

</script>

<!-- Элемент для которого выводится -->

<div class="demo-in">

<div class="image"><a href="<?php echo $product['href']; ?>"><img src="<?php echo $product['thumb']; ?>" title="<?php echo $product['name']; ?>" alt="<?php echo $product['name']; ?>" /></a></div>

</div>

<!-- Элемент который выводится -->

<div class="demo-out">

<div class="image"><a href="<?php echo $product['href']; ?>"><img src="<?php echo $product['thumb']; ?>" title="<?php echo $product['name']; ?>" alt="<?php echo $product['name']; ?>" /></a></div>

</div>

<!-- Конец Tooltip -->