Эффекты увеличения (лупа: cloud-zoom и zoomer) изображения товара - Разработки и улучшения

<?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 }?>

<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>

<script type="text/javascript" src="<?php echo $this->baseurl ;?>/templates/<?php echo $this->template ?>/js/zoomsl-3.0.min.js">
</script>

<!-- JAVASCRIPT -->
<script type="text/javascript">
   jQuery(function(){   
      $(".my-foto").imagezoomsl({        
         zoomrange: [3, 3]
      });
   });   
</script>
<!-- HTML -->
<p>
	<img class="my-foto" data-large="большое изображению" src="маленькое изображение" title="имя фото" /></p>

<!-- JAVASCRIPT -->
<script type="text/javascript">
   jQuery(function(){   
      $(".my-foto").imagezoomsl({        
         zoomrange: [3, 3]
      });
   });   
</script>
<!-- HTML -->
<p>
	<img class="my-foto" data-large="/images/stories/zoomer/fashion-056.jpg" src="/images/stories/zoomer/fashion-056-thumb.jpg" title="Фото" /></p>

<?php
/**
* @package   yoo_symphony
* @author    YOOtheme http://www.yootheme.com
* @copyright Copyright (C) YOOtheme GmbH
* @license   http://www.gnu.org/licenses/gpl.html GNU/GPL
*/

// no direct access
defined('_JEXEC') or die('Restricted access');

// include config	
include_once(dirname(__FILE__).'/config.php');

// get warp
$warp =& Warp::getInstance();

// load main template file, located in /layouts/template.php
echo $warp->template->render('template');

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="/templates/yoo_symphony/js/zoomsl-3.0.min.js"></script>

$(".my-foto").imagezoomsl({        
	zoomrange: [3, 3],
	magnifierpos: "left"
});

<!-- JAVASCRIPT -->

<script>
   jQuery(function(){
   
       $(".my-foto").imagezoomsl({
	  
          descarea: ".my-container", 				
          zoomrange: [1, 12],
          magnifiereffectanimate: "fadeIn",
          magnifierborder: "none"	

       });
   });   
</script>

<style>
.my-container{
	border: 1px solid #F0F0F0; 
	width: 350px; 
	height: 350px;
}
</style>

<!-- HTML -->
<p style="text-align: center;">
	<img class="my-foto" data-large="БОЛЬШАЯ КАРТИНКА.jpg" src="МАЛЕНЬКАЯ КАРТИНКА.jpg" data-title="НАЗВАНИЕ КАРТИНКИ" data-help="Используйте колесико мыши для увеличения +/-" title="Фото"></p>
<div class="my-container"></div>

<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 }?>