Question

我在网上购物网站上使用提升变焦插件。这是工作。但是当我的产品使用ajax进行更改时，它不会设置data-zoom-image属性。有没有解决方案可以解决这个问题？

<script>

功能showproduct（obj1，objproid） { //警报（objproid）;

 var url,obj;
   url="showproduct.php?progid3="+obj1;
   try
   {
      obj=new XMLHttpRequest();

   }
   catch(e)
   { 
       try
       {

            obj=new ActiveXObject("Microsoft.XMLHTTP");
       }
       catch(e)
       {
          alert("Your browser not supported AJAX");
       }
   }

   obj.open("post",url,true);
   obj.send(null);
   obj.onreadystatechange=function()
   {
         if(obj.readyState==4)
         {
            $('a').removeClass("boxcolor5") 
            $('#'+objproid).addClass("boxcolor5");
             var res=obj.responseText;  
            var txtar= res.split(":||:");                               
            document.getElementById('res1').innerHTML=txtar[0];
            document.getElementById('res2').innerHTML=txtar[1];
            document.getElementById('res3').innerHTML=txtar[2];
            document.getElementById('products').value=txtar[2];
            document.getElementById('res4').innerHTML=txtar[3];
            document.getElementById('res5').innerHTML='Rs.'+txtar[4];   
            $("#zoom_03").data("zoom-image",'<?php echo $path; ?>/master/imagecontent/images/'+txtar[5]).elevateZoom();                     
            document.getElementById('zoom_03').src='<?php echo $path; ?>/master/imagecontent/images/bigimg/'+txtar[5];  

            document.getElementById('res10').setAttribute('data-image','<?php echo $path; ?>/master/imagecontent/images/bigimg/'+txtar[5]); 
            document.getElementById('res10').setAttribute('data-zoom-image','<?php echo $path; ?>/master/imagecontent/images/'+txtar[5]);
        document.getElementById('imh0').src='<?php echo $path; ?>/master/imagecontent/images/thumbs/'+txtar[5];
            document.getElementById('res11').setAttribute('data-image','<?php echo $path; ?>/master/imagecontent/images/bigimg/'+txtar[6]);
            document.getElementById('res11').setAttribute('data-zoom-image','<?php echo $path; ?>/master/imagecontent/images/'+txtar[6]);

            document.getElementById('imh1').src='<?php echo $path; ?>/master/imagecontent/images/thumbs/'+txtar[6];
            document.getElementById('res12').setAttribute('data-image','<?php echo $path; ?>/master/imagecontent/images/bigimg/'+txtar[7]);
            document.getElementById('res12').setAttribute('data-zoom-image','<?php echo $path; ?>/master/imagecontent/images/'+txtar[7]);
            document.getElementById('imh2').src='<?php echo $path; ?>/master/imagecontent/images/thumbs/'+txtar[7];
            document.getElementById('res13').setAttribute('data-image','<?php echo $path; ?>/master/imagecontent/images/bigimg/'+txtar[8]);
            document.getElementById('res13').setAttribute('data-zoom-image','<?php echo $path; ?>/master/imagecontent/images/'+txtar[8]);
            document.getElementById('imh3').src='<?php echo $path; ?>/master/imagecontent/images/thumbs/'+txtar[8];
            document.getElementById('res14').setAttribute('data-image','<?php echo $path; ?>/master/imagecontent/images/bigimg/'+txtar[9]);
            document.getElementById('res14').setAttribute('data-zoom-image','<?php echo $path; ?>/master/imagecontent/images/'+txtar[9]);
            document.getElementById('imh4').src='<?php echo $path; ?>/master/imagecontent/images/thumbs/'+txtar[9];
            document.getElementById('res15').setAttribute('data-image','<?php echo $path; ?>/master/imagecontent/images/bigimg/'+txtar[10]);
            document.getElementById('res15').setAttribute('data-zoom-image','<?php echo $path; ?>/master/imagecontent/images/'+txtar[10]);
            document.getElementById('imh5').src='<?php echo $path; ?>/master/imagecontent/images/thumbs/'+txtar[10];                
         }           
   }
   return false;

}

拇指和提升图像的代码： -

  <div class="product_img_display">
  <div class="product_img">
  <img id="zoom_03" src="images/small/image1.png" data-zoom-image="images/large/image1.jpg"/> 
   </div>
 <div class="product_small_img">
  <div class="multizoom1 thumbs">
   <div class="main" style="height:120px;"> 
   <ul id="carousel2" class="elastislide-list">
  <?php
$i=0;
   $mulim="select * from imageupload where product_code='$codepr'";
  $mulim1=mysql_query($mulim) or die(mysql_error());
 while($mulim2=mysql_fetch_array($mulim1))
 {
 ?> 
   <li class="ml"><a id="res1<?php echo $i; ?>" href="#" data-image="<?php echo $path; ?     >/master/imagecontent/images/bigimg/<?php echo $mulim2['image']; ?>" data-zoom-image="<?php echo $path; ?>/master/imagecontent/images/<?php echo $mulim2['image']; ?>"> 
   <img id="imh<?php echo $i; ?>" src="<?php echo $path; ?>/master/imagecontent/images/thumbs/<?php echo   $mulim2['image']; ?>"  height="65" width="65"  /> 
  </a></li>
  <?php
  $i++;
  }
?>
 </ul>
</div>
 <script>
      $("#zoom_03").elevateZoom({zoomWindowWidth:470, zoomWindowHeight:415,gallery:'carousel2', cursor: 'pointer',     galleryActiveClass: 'active', imageCrossfade: true,scrollZoom : true, loadingIcon: '<?php echo $path; ?>/images/spinner.gif'});
 //pass the images to Fancybox 
 $("#zoom_03").bind("click", function(e) {
 var ez = $('#zoom_03').data('elevateZoom');

  $.fancybox(ez.getGalleryList());
   return false; });
   </script>

Answer 1

删除当前缩放

$('.zoomContainer').remove();
$('#elevate-zoomr').removeData('elevateZoom');

再次致电

jQuery("#elevate-zoom").elevateZoom({
  zoomType: "inner",
  cursor: "crosshair"
});

和css

.zoomContainer{ z-index: 9999;}
.zoomWindow{ z-index: 9999;}

提升缩放插件不使用ajax

1 个答案: