сделал так:
загружаем отсюда http://www.professorcloud.com/downloads/cloud-zoom.1.0.2.zip архив.
файлы из него ставим у catalog/view/javascript/jquery/ .
у файле catalog/view/theme/ВАША ТЕМА ПО УМОЛЧАНИЮ/template/common/header.tpl после
<script type="text/javascript" src="catalog/view/javascript/jquery/tab.js"></script>вставляем ето:
<script type="text/javascript" src="catalog/view/javascript/jquery/cloud-zoom.1.0.2.js"></script>
<script type="text/javascript" src="catalog/view/javascript/jquery/cloud-zoom.1.0.2.min.js"></script>
<link rel="stylesheet" href="catalog/view/javascript/jquery/cloud-zoom.css" type="text/css">
после у файле catalog/view/theme/ВАША ТЕМА ПО УМОЛЧАНИЮ/template/product/product.tpl
ищем:
<td style="text-align: center; width: 250px; vertical-align: top;"><a href="<?php echo $popup; ?>" title="<?php echo $heading_title; ?>" class="thickbox" rel="gallery"><img src="<?php echo $thumb; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" id="image" style="margin-bottom: 3px;" /></a><br />
<span style="font-size: 11px;"><?php echo $text_enlarge; ?></span></td>изменяем на :
<td style="text-align: center; width: 250px; vertical-align: top;"><div class="zoom-section">
<div class="zoom-small-image"><a href="<?php echo $popup; ?>" class = "thickbox cloud-zoom" id="zoom1" rel="tint:'#ff0000',tintOpacity:0.5 ,smoothMove:5,zoomWidth:285, adjustY:-4, adjustX:10"><img src="<?php echo $thumb; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" id="image"></a></div></div>
<span style="font-size: 11px;"><?php echo $text_enlarge; ?></span></td>и пользуемся. Но... как сделать так, чтобы снизу появились дополнительные картинки и нажимая на них открывались в основном окне картинки, коротче так как здесь http://sualaptopdn.com/demo/index.php?route=product/product&path=20&product_id=46