title: Dynamic image zoom using jquery in php
body: <p>I am using jQuery image zooming on dynamic image files.</p>
  
  <p>I have two files</p>
  
  <ol>
  <li><p>default.php</p>
  
  <pre><code>&lt;head&gt;
  &lt;script src='/../../../../js/jquery-1.8.2.min.js'&gt;&lt;/script&gt;
  &lt;script src='/../../../../js/jquery.elevatezoom.js'&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  echo '&lt;a href="javascript:void(0);" onclick="smallImgList(\''.implode('---',$smallImg[$key]).'\', \''.implode('---',$mediumImg[$key]).'\')" onmouseover="change(\''.$result1[$key].'\')"&gt;&lt;img src="'.$a.'"  height="40px" width="40px" id="'.$key.'" /&gt;&lt;/a&gt;';
  
  &lt;script&gt;
  function change(s)
  {
   $('.main-image img').attr('src', s);
   $('.main-image img').attr('data-zoom-image', a);   
   $('.main-image img').attr('style','width:200px; height:200px;');
   $('.main-image img').attr('class','demo'); 
  }
  &lt;/script&gt;
  &lt;script&gt;
   $(".demo").elevateZoom();
  &lt;/script&gt;
  </code></pre></li>
  <li><p>default_images.php</p>
  
  <pre><code>&lt;div class="main-image"&gt;
   &lt;img class="demo" src='http://ecx.images-amazon.com/images/I/51kCAZT4LML._SX38_SY50_CR,0,0,38,50_.jpg' style="width:200px; height:200px;"/&gt;
  &lt;/idv&gt;
  </code></pre></li>
  </ol>
  
  <p>It's working properly with static images, but when I make it dynamic, like above code is showing, the zoom function is working but it can zoom only one default image,</p>
  
  <p>While I checked on console, the <code>data-zoom-image</code> attribute have dynamic url.
  But zooming default image.</p>
  
  <p>Here is the link. click <a href="http://test.youshop.in.ua/component/virtuemart/B00ESBVDNA-detail.html?Itemid=0" rel="nofollow">here</a>.</p>
  
  <p>I can't have any solution. Help me if you have any idea.</p>
  
  <p>Thanks.</p>