карточки товаров
 

Всем привет!
Подключила плагин jQuery Colorbox (теперь не уверена, что он нужен)
Мне нужно, чтобы при нажатии на любой товар открывалась не новая страничка с детальным фото и описанием, а всплывала картинка с той же информацией (детальное фото и характеристики товара).

Сначала думала, что нужно где-то прописать

<script>
$(document).ready(function(){
   $("div.catalog-item-image a").colorbox({
       href: <?=$arResult["DETAIL_PICTURE"]["SRC"]?>
   });
});
</script>

Но не поняла, куда это вставить)
Вставляла на страничку продукции (предварительно включив туда компонент catalog element, потому что иначе $arResult - NULL), потом в catalog section. Естественно (а может и не очень) не получилось. При нажатии на товар открывается новая страничка.

Потом подумала, что можно в шаблоне поменять

<?
(is_array($arElement["PREVIEW_PICTURE"])):
$width = $arElement["PREVIEW_PICTURE"]["WIDTH"];
?>
    <div class="catalog-item-image">
        <a href="<?=$arElement["DETAIL_PAGE_URL"]?>"><img border="0" src="<?=$arElement["PREVIEW_PICTURE"]["SRC"]?>" width="<?=$arElement["PREVIEW_PICTURE"]["WIDTH"]?>" height="<?=$arElement["PREVIEW_PICTURE"]["HEIGHT"]?>" alt="<?=$arElement["NAME"]?>" title="<?=$arElement["NAME"]?>" /></a>
    </div>
<?
    elseif(is_array($arElement["DETAIL_PICTURE"])):
        $width = $arElement["DETAIL_PICTURE"]["WIDTH"];
?>
    <div class="catalog-item-image">
        <a href="<?=$arElement["DETAIL_PAGE_URL"]?>"><img border="0" src="<?=$arElement["DETAIL_PICTURE"]["SRC"]?>" width="<?=$arElement["DETAIL_PICTURE"]["WIDTH"]?>" height="<?=$arElement["DETAIL_PICTURE"]["HEIGHT"]?>" alt="<?=$arElement["NAME"]?>" title="<?=$arElement["NAME"]?>" /></a>
    </div>
<?
    endif;
?>

но на что поменять - тоже не знаю) Есть какие идеи?
Может, я вообще не туда копаю?

забыла совсем.. сайт на Битриксе