JSFiddle - React, Tailwind, and code Playground

by B L Praveen

HTML

<script src="http://www.professorcloud.com/js/cloud-zoom.1.0.2.js"></script>
<link rel="stylesheet" href="http://www.professorcloud.com/styles/cloud-zoom.css">
<div style="width:400px"><img src="http://www.professorcloud.com/images/zoomengine/bigimage00.jpg"/></div>

JavaScript

$.fn.resize = function(a) {
    var d = Math.ceil;
    if (a == null) a = 200;
    var e = a,
        f = a;
    $(this).each(function() {
        var b = $(this).height(),
            c = $(this).width();
        if (b > c) f = d(c / b * a);
        else e = d(b / c * a);
        $(this).css({
            height: e,
            width: f
        })
    })
};
$("img").resize(200);
$('img').each(function() {
    var $this = $(this);
    var src = $this.attr('src');
    var str = '<a href="' + src + '" class="cloud-zoom" rel="zoomWidth:250,zoomHeight:300,adjustX: 10, adjustY:-4" />';
    $this.wrap(str);
    $(".cloud-zoom, .cloud-zoom-gallery").CloudZoom();
});