[Помогите] Tooltip картинок товаров в категории

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

вопрос при использовании переменной <img src="<?php echo $product['thumb']; ?>"
которая по сути должна подставлять картинки, картинки всплывают все работает но у всех товаров выводится одна и та же которая стоит первой в категории... что делаю не так?

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

 

Код в студию. Скорее всего лажаешь при генерации tooltip'а, примерно вот тут:

HTML:

<div style="display: none">
	<!-- элемент, содержание которого выводиться в подсказке -->
	  <div id="demo1">А вот тут может быть любой текст</div>
</div>

 

я уже замучился как только не делал не хочет у меня через Jquary работать

вот весь код

<!-- Начало 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 -->

 

попробуйте прописать в линках полный путь к скриптам и css

сейчас аналогично долблюсь над созданием всплывающих атрибутов на главной через tooltip

 

для чего ? подсказки у меня всплывают но проблема в картинках я же написал

 

Это явно не весь код Не вижу цикла php-шного - такой тултип должен быть для каждого товара.

 

хах...а у меня такая же фигня с атрибутами...всем атрибутам на присваивается одинаковый индекс...короче все атрибуты у товаров на главной - одинаковые.
Что через tooltip, что через обычный визуальный вывод

 

а можно код в студию как это должно быть?
я то добавлял этот код в www\catalog\view\theme\default\template\product\category.tpl

 

Ага, посмотрел внимательно на код. Проблема в том, что у тебя div class="demo-out", и таких div'ов будет по количеству продуктов. Соответственно mop-tip не сможет понять, какой из них нужен... В оригинальном примере речь идет об id, которые уникальны.

 

div id сам понимаешь что не получится потому что он только одному товару первому будет назначатся поэтому я и сделал из него класс ! как же быть все таки с кодом?!?!

 

Правильно.

1. Либо генерируй id на лету и на каждый #demo-in1, #demo-in2 вешай tooltip, показывающий #demo-out1, #demo-out2...

2. Либо tooltip, который умеет генерить конент сам, например этот:

Тогда имеем примерно следующее:

HTML:

<script type="text/javascript" src="/catalog/view/javascript/jquery-tooltip/jquery.tooltip.js"></script>
<script>
	$(document).ready(function() {
		$( 'img' ).tooltip({
			bodyHandler: function() {
				var element = $( this );
				return "<img src='" + this.src + "'>";
			}
		});
	});
</script>

 

а поподробнее можно код?
а каким образом его подключать к объекту?

 

Это в общем то и есть весь код

 

а каким образом его подключать к объекту?

 

В смысле?

Код:

$( 'img' ).tooltip({
	bodyHandler: function() {
		var element = $( this );
		return "<img src='" + this.src + "'>";
	}
});

К каждому <img> - tooltip... Собственно ничего не мешает его прикрепить не к тэгу <img>, а к объемлющему <div>, но тогда адрес картинки раздобыть будет чуточку сложнее, что-то вроде

Код:

return "<img src='" + $(this).children("img").attr("src") + "'>";

 

den.sab, Я переписал бы данный код.И вывод сделал по тегу title.Он 100% сработает на каждую картинку. Ну или допиливать данный скрипт на яве, который язык я не знаю....Ну и еще вариант поискать другой тултип но по тегу.

 

Ессно это не итоговый код, а направление. Насколько я понимаю den.sab уже вполне успешно его начал интегрировать