JSFiddle - React, Tailwind, and code Playground

by Al Kasih

HTML

<link rel="stylesheet" href="http://www.frog-splat.com/css/easyzoom.css">
<script src="http://www.frog-splat.com/js/easyzoom.js"></script>
<div id="mview">
    <div id="mcap">Click to zoom</div>
    <div class="easyzoom easyzoom--overlay"> <a href="http://www.frog-splat.com/media/test/IMG_20130403_084209_183.jpg" id="zoomsrc">
			   <img src="http://www.frog-splat.com/media/test/sm_IMG_20130403_084209_183.jpg" width="349" id="zoomview" />
		    </a>

    </div>
    <!------>
    <div id="imgbar">
        <img src="http://www.frog-splat.com/media/test/tn_IMG_20130403_084209_183.jpg" width="60" />
        <img src="http://www.frog-splat.com/media/test/tn_IMG_20130403_091502_782.jpg" width="60" />
        <img src="http://www.frog-splat.com/media/test/tn_IMG_20130403_091511_640.jpg" width="60" />
    </div>
</div>

JavaScript

$(document).ready(function() {
    var $easyzoom = $(".easyzoom").easyZoom();
    var easyzoomAPI = $easyzoom.data("easyZoom");
    
    
    $("#imgbar img").hover(function(e) {
        var bigImg = this.src.replace("tn_", "sm_");
        var bigImgSrc = this.src.replace("tn_", "");
        easyzoomAPI.swap(bigImg,bigImgSrc);
    });
});