Итак.
Вот готовый кусок кода:
<?php if ($thumb || $images) { ?>
<div class="left">
<div id="links">
<?php if ($thumb) { ?>
<div class="image"><a href="<?php echo $popup; ?>" title="<?php echo $heading_title; ?>">
<img src="<?php echo $thumb; ?>" alt="<?php echo $heading_title; ?>">
</a></div>
<?php } ?>
<?php if ($images) { ?>
<div class="image-additional">
<?php foreach ($images as $image) { ?>
<a href="<?php echo $image['popup']; ?>" title="<?php echo $heading_title; ?>">
<img src="<?php echo $image['thumb']; ?>" alt="<?php echo $heading_title; ?>">
</a>
<?php } ?>
</div>
<?php } ?>
</div>
</div>
<!-- The Gallery as lightbox dialog, should be a child element of the document body -->
<div id="blueimp-gallery" class="blueimp-gallery">
<div class="slides"></div>
<h3 class="title"></h3>
<a class="prev">‹</a>
<a class="next">›</a>
<a class="close">×</a>
<a class="play-pause"></a>
<ol class="indicator"></ol>
</div>
<script>
document.getElementById('links').onclick = function (event) {
event = event || window.event;
var target = event.target || event.srcElement,
link = target.src ? target.parentNode : target,
options = {index: link, event: event},
links = this.getElementsByTagName('a');
blueimp.Gallery(links, options);
};
</script>
Я думаю поймете, куда его запихнуть, копируйте так, как я написал, не надо JS код переносить в начало файла
В header.tpl прописываете:
<link rel="stylesheet" type="text/css" href="catalog/view/theme/default/stylesheet/blueimp-gallery.min.css" />
В footer.tpl (перед </body>) прописываете:
<script type="text/javascript" src="catalog/view/javascript/jquery/blueimp-gallery.min.js"></script>
И, конечно, закинуть эти файлы в папки jquery и stylesheet
По клику на любое изображение будет открываться галерея со всеми изображениями товара