JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.github.com/bittersweetryan/YADI/master/jquery.imagezoom.js"></script>
<link rel="stylesheet" href="https://raw.github.com/bittersweetryan/YADI/master/style.css">
<script src="https://github.com/bittersweetryan/YADI/raw/master/images/close.png"></script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title></title>
</head>
<body>
<div>
    <div>
        <p>This is my product</p>
        <div id="preview">
        <img src="http://trus.imageg.net/graphics/product_images/pTRU1-10669782reg.jpg">
        </div>
    </div>
    <ul id="images">
        <li><img src="http://trus.imageg.net/graphics/product_images/pTRU1-8966583dt.jpg"></li>
        <li><img src="http://trus.imageg.net/graphics/product_images/pTRU1-8807664dt.jpg"></li>
        <li><img src="http://trus.imageg.net/graphics/product_images/pTRU1-10669782dt.jpg"></li>
        <li><img src="http://trus.imageg.net/graphics/product_images/pTRU1-10168635dt.jpg"></li>
        <li><img src="http://trus.imageg.net/graphics/product_images/pTRU1-11325637dt.jpg"></li>
        <li><img src="http://trus.imageg.net/graphics/product_images/pTRU1-9428817dt.jpg"></li>
        <li><img src="http://trus.imageg.net/graphics/product_images/pTRU1-9407103dt.jpg"></li>
          <li><img src="http://trus.imageg.net/graphics/product_images/pTRU1-8765906_alternate2_dt.jpg"></li>
          <li><img src="http://trus.imageg.net/graphics/product_images/pTRU1-8966576dt.jpg"></li>    
    </ul>
</div>
</body>
</html>

JavaScript

(function( $, undefined ){
  $.fn.imagezoom = function(base, options){
	var $this = $(this),
		defaults = {
			width : 700,
			height : 620,
			previewHeight: 50,
			previewDivWidth: 200,
			thumbsWidth: 0,
			imagePath: 'images'
		},
		$stageDiv = createDiv(),
		$pictureFrame = null,
		$overlay = getOverlay(),
		$preview = null,
		arrowsLoaded = false,
		$thumbs = null;

		if(typeof options === 'object'){
			options = $.extend({},defaults,options);
		}
		else{
			options = defaults;
		}

		//cache variables that point to the zoom elements
		$pictureFrame = getPictureFrame(options);
		$preview = getPreview(options);
		$thumbs = getThumbs();

		$("body").append($stageDiv);

		//if no images were found in the li passed in return
		if($this.find('li>img').length === 0){
			$.error("No images were found under the root element.");
		}

		//remove the ul that has the images from the DOM
		$this.remove();

		//loop through images and process each one
		$this.find('li>img').each(processImage);

		$pictureFrame.prepend($thumbs);

		var close_left = parseInt($pictureFrame.css("left"),10) + options.width;
		var close_top = parseInt($pictureFrame.css("top"),10) - 10;
	
		//add the close link
		$pictureFrame.find("#iz_close > a").click(function(){
			$(this).parent().hide();
			$pictureFrame.animate({height:0},function(){
				$(this).animate({width:0},function(){
					$pictureFrame.hide();
					$overlay.fadeOut();
				});
			});
		}).end().find("#iz_close").css({"left": close_left , "top": close_top}).
		hide();

		//hide the objects
		$pictureFrame.hide();
		$overlay.hide();

		$pictureFrame.width(0).height(0);

		$preview.append(getLink());
		base.append($preview);
	
	$("body").append($pictureFrame).append($overlay);

	//inner functions, these use vars nested in the plugin
	function processImage(){
		var $span = $('<span></span>'),
			$thumb = $(this),
			$newImg = $thumb.clone().height(options.height - 100),
			$previewImg =...