Увеличение картинки по клику, на лупу в карточке товара - JoomShopping

sergkh специально для вас:
скачиваем, указанный выше, плагин zoomsl-3.0.min.js с сайта автора и переносим его в папку: http://ваш_сайт/components/com_jshopping/js/

Открываем файл: http://ваш_сайт/components/com_jshopping/templates/ваш_шаблон/product/product_default.php

В начале меняем код для главного изображения.
Вместо:

Код

<?php foreach($this->images as $k=>$image){?>
<a class="lightbox" id="main_image_full_<?php print $image->image_id?>" href="<?php print $this->image_product_path?>/<?php print $image->image_full;?>" <?php if ($k!=0){?>style="display:none"<?php }?>>
    <img id = "main_image_<?php print $image->image_id?>" src = "<?php print $this->image_product_path?>/<?php print $image->image_name;?>" alt="<?php print htmlspecialchars($image->_title)?>" title="<?php print htmlspecialchars($image->_title)?>" />
    <div class="text_zoom">
        <img src="<?php print $this->path_to_image?>search.png" alt="zoom" /> <?php print _JSHOP_ZOOM_IMAGE?>
    </div>
</a>
<?php }?>

вставляем:

Код

<?php foreach($this->images as $k=>$image){?>
<a class="lightbox" id="main_image_full_<?php print $image->image_id?>" href="<?php print $this->image_product_path?>/<?php print $image->image_full;?>" <?php if ($k!=0){?>style="display:none"<?php }?>>
    <img class="denben777" src="<?php print $this->image_product_path?>/<?php print $image->image_name;?>"  data-large="<?php print $this->image_product_path?>/<?php print $image->image_full;?>" 
    data-title="<?php print htmlspecialchars($this->product->name)?>" data-help="Используйте колесико мыши для Zoom +/-" title="<?php print htmlspecialchars($this->product->name)?>">
    <div class="text_zoom">
    	<img src="<?php print $this->path_to_image?>search.png" alt="zoom" /><?php print _JSHOP_ZOOM_IMAGE?>
    </div>
</a>
<?php }?>

В коде для значков ничего не трогаем!

Теперь подключаем сам плагин.
Для этого внизу product_default.php с новой строки вставляем:

Код

<script src="/components/com_jshopping/js/zoomsl-3.0.min.js" type = "text/javascript" ></script>
<script type="text/javascript">
	jQuery(document).ready(function ($) {	
	   $(".denben777").imagezoomsl({	  
		   zoomrange: [1, 10],
		   cursorshadeborder: "10px solid #000",
		   magnifiereffectanimate: "fadeIn",
		   magnifierpos: "right"		
	   });
	});
</script>

Проверено на JS 3.14.0. C lightbox не конфликтует.

Результат внедрения (страница товара):
                                    ,