JSFiddle - React, Tailwind, and code Playground

by naokiota

HTML

<table><tr>
<td width="80"><a href="javascript:void(0)" onclick="showLarge('image1.jpg')"><img  id="bigImg"  src="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image3.png" border="0" 
    data-zoom-image="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/large/image3.jpg" ></a>
    </td>
    </tr></table>

<img src="small2" border="0" data-zoom-image="big2">


<script src='http://www.bewolfclothing.com/elevatezoom/jquery.elevatezoom.js'></script>

JavaScript

function showLarge(path)
{
   var full_path = 'upload/product_image/'+path;
  document.getElementById("bigImg").src = full_path;
  document.getElementById("bigImg").setAttribute("data-zoom-image",full_path);
}



$('#bigImg').elevateZoom({
    zoomType: "inner",
cursor: "crosshair",
zoomWindowFadeIn: 500,
zoomWindowFadeOut: 750
   });