Работа! Увеличение при при клике вместо перехода в карточку товара

Нужно изменить работу витрины, что бы при при клике по картинке товара (любого товара в витрине) вместо перехода в карточку товара производилось увеличение посредством highslide.

Что смог сделать своими руками:

1) Прописываем этот код в начале страницы шаблона файла:
www/catalog/view/theme/default/template/custom_template/category.tpl

<script type="text/javascript" src="highslide/highslide-with-gallery.js"></script>
<link rel="stylesheet" type="text/css" href="highslide/highslide.css" />

2) Прописываем (под ним) и этот скрипт:

<!-- Скрипт галереи highslide -->
<script type="text/javascript">
hs.graphicsDir = 'highslide/graphics/';
hs.align = 'center';
hs.transitions = ['expand', 'crossfade'];
hs.outlineType = 'rounded-white';
hs.fadeInOut = true;
//hs.dimmingOpacity = 0.75;

// Add the controlbar
hs.addSlideshow({
//slideshowGroup: 'group1',
interval: 5000,
repeat: false,
useControls: true,
fixedControls: 'fit',
overlayOptions: {
opacity: 0.75,
position: 'bottom center',
hideOnMouseOut: true
}
});
</script>

3) Прописываем код для вывода в витрине своей картинки:

<a href="/image/catalog/картинка1.jpg" class="highslide" onclick="return hs.expand(this)">
<img src="/image/catalog/картинка01.jpg" style="border-width: 0px" /> </a>
<div class="highslide-caption"> <p style="margin-left: 15px; margin-top: 0px; margin-bottom: 0" align="left">
<p align="left"> Текст. </p></div>


Куда прописываем код картинки - мой пример:

4) Строка 172, стоит такой код:

<?php if($ns_on_off_category_page_slider_additional_image =='1') { ?>
<div class="image-carousel-category">
<a itemprop="url" href="<?php echo $product['href']; ?>"><img itemprop="image" <?php if ($product['product_quantity'] <= 0 && $show_stock_status) { ?>data-status="<?php echo $product['stock_status']; ?>"<?php } ?> src="<?php echo $product['thumb']; ?>" alt="<?php echo $product['name']; ?>" title="<?php echo $product['name']; ?>" class="img-responsive" /></a>
<?php foreach ($product['additional_img'] as $img) { ?>
<a class="hidden additional-image" href="<?php echo $product['href']; ?>"><img class="img-responsive" src="<?php echo $img;?>" alt="" title="" /></a>
<?php } ?>
</div>

---- Жирным шрифтом обозначен внедренный код в строку 172:

<?php if($ns_on_off_category_page_slider_additional_image =='1') { ?>

<div class="image-carousel-category">
<div class="leftimg" style="margin: 20px 20px 5px 20px">

<a itemprop="url" class="highslide " onclick="return hs.expand(this)" href="/image/catalog/картинка1.jpg">
<img itemprop="image" src="/image/catalog/картинка01.jpg" alt="Текст-1" title="Текст-2" class="img-responsive">
</div>
<div class="image-carousel-category">
<a itemprop="url" href="<?php echo $product['href']; ?>"><img itemprop="image" <?php if ($product['product_quantity'] <= 0 && $show_stock_status) { ?>data-status="<?php echo $product['stock_status']; ?>"<?php } ?> src="<?php echo $product['thumb']; ?>" alt="<?php echo $product['name']; ?>" title="<?php echo $product['name']; ?>" class="img-responsive" /></a>
<?php foreach ($product['additional_img'] as $img) { ?>
<a class="hidden additional-image" href="<?php echo $product['href']; ?>"><img class="img-responsive" src="<?php echo $img;?>" alt="" title="" /></a>
<?php } ?>
</div>

Это работает на таком примере, в котором вручную вставлен код и при клике по картинке открывается только одна картинка которая вставлена вручную (в этот код).

НУЖНО, правильно прописать (внедрить) код highslide в страницу витрины (файл шаблона), что бы код на основе этого примера работал автономно (самостоятельно) со всеми товарами сайта которые выведены на витрину магазина.