Эффект лупы, показать полное изображение по клику лупы - Разработки и улучшения

Аналогия, как раз такая же - код немного другой. И есть нюансы.
Чтобы быстро:...............................................
В папку http://ваш_сайт/components/com_jshopping/js/ положите все демо-файлы из архива кроме index.htm
Подключение внизу product_default.php:

Код

<link rel="stylesheet" href="/components/com_jshopping/js/cloudzoom.css" type="text/css" media="all" /> 
<script src="/components/com_jshopping/js/cloudzoom.js" type = "text/javascript" ></script>
<script type="text/javascript">
     jQuery(document).ready(function() {
	     CloudZoom.quickStart();
     });
</script>

Большое изображение:

Код

<?php foreach($this->images as $k=>$image){?>
     <?php if ($k == "0") : ?>        
        <div style="border:1px solid #ccc; display:inline-block;line-height:0;">
            <img class="cloudzoom" alt ="<?php print htmlspecialchars($image->_title)?>" id ="zoom1" src="<?php print $this->image_product_path?>/<?php print $image->image_name;?>"
                 title="<?php print htmlspecialchars($image->_title)?>"
                 data-cloudzoom='
                 zoomImage:"<?php print $this->image_product_path?>/<?php print $image->image_full;?>",
                 zoomMatchSize:true,
                 tintColor:"#000",
                 tintOpacity:0.25,
                 captionPosition:"bottom",
                 maxMagnification:4
                 '>           
        </div>        
        <div class="text_zoom">
            <style type="text/css">#jquery-lightbox {z-index:99999;}</style>
            <a class="lightbox" href="<?php print $this->image_product_path?>/<?php print $image->image_full;?>">
                <img src="<?php print $this->path_to_image?>search.png" alt="zoom" /> <?php print _JSHOP_ZOOM_IMAGE?>
            </a>
        </div>
    <?php endif; ?> 
<?php }?>

Значки:

Код

<?php if (count($this->images)>1) {?>
	<?php foreach($this->images as $k=>$image){?> 
		<div style="margin-top:10px">
			<a href="<?php print $this->image_product_path?>/<?php print $image->image_full;?>" class="thumb-link">    
				<img class="cloudzoom-gallery" width="64" src="<?php print $this->image_product_path?>/<?php print $image->image_thumb?>"
					 title="<?php print htmlspecialchars($image->_title)?>"
					 alt ="<?php print htmlspecialchars($this->product->name)?>"
					 data-cloudzoom='{
					 "useZoom":"#zoom1",
					 "image":"<?php print $this->image_product_path?>/<?php print $image->image_name;?>",
					 "zoomImage":"<?php print $this->image_product_path?>/<?php print $image->image_full;?>"}'>
			</a>
		</div> 
	<?php }?>
<?php }?> 

Результат (J_2.5 + JS_3):

Супер. Спасибо за инструкцию, подключил все работает. такой вопрос можно как то сделать чтобы увелечение картинки было не по нажатию кнопки "увеличить изображение", по клику на лупу?  как здесь https://www.wildberries.ru/catalog/8726072/detail.aspx?targetUrl=NW . При клике всплывает картинка.