JSFiddle - React, Tailwind, and code Playground

by bittersweetryan

HTML

<!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>

CSS

.zoom_pictureFrame{
    width: 750px; 
    background-color: #ffffff;
    height: 620px;
    border: 6px solid black;
    position: fixed;
    z-index:9999;
    moz-border-radius: 2px;
    webkit-border-radius: 2px;
    border-radius: 2px;
    -moz-box-shadow: 15px 15px 10px #888;
    -webkit-box-shadow: 15px 15px 10px #888;
    box-shadow: 15px 15px 10px #888;
    padding: 10px;
    display:inline-block;
    text-align:center;
    margin-left: auto;
    margin-right: auto; 
    overflow: hidden; 
    padding:0px;
    margin:0px;
  }
  
  .zoom_thumbs{
    height: 120px;
 /*   opacity: .6;
    filter:alpha(opacity=60); */
    position: relative;         
    float:left;
    overflow: hidden;
    padding:0px;
    margin:0px;
    text-align:center;
    vertical-align: middle;
  }
  
  .zoom_main{
    text-align: center; 
    margin:0px;
  } 
  
  .zoom_overlay{
    width:100%;
    height: 100%;
    margin:0; 
    padding:0;
    opacity: .6;
    filter:alpha(opacity=60);
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
    z-index: 9998;
    position: fixed;
    top: 0;
    left: 0;
    padding: 0;
    margin: 0;
    background-color:#999999;
    /*background-image: url(steel.jpg);*/
  }
  
  .zoom_main img{position:absolute;bottom:0;right:0;left:0;margin:auto;}
  
  .zoom_close{
    position: absolute;
    top: 0px;
    right: 0px;
    display: block;
    width:auto;
    z-index: 2;
  }

  .zoom_close img{
    width: 20px;
  }
  
  .zoom_close img :hover{
    cursor: pointer;
  }

  .zoom_close a{
    color: #6E6E6E;
  }

  .zoom_preview{
    display:block;
    width:200px;
    position:absolute;
    float:left;
    text-align:center;
    overflow: hidden;
  }

  .arrow{
    position:absolute;
    display:block;
    top:20px;
    height:50px;
    width:25px;
    background-color: #CCCCCC;
    opacity: .8;
    filter:alpha(opacity=80);
    padding: 5px;
    background-repeat:no-repeat;
  }

  .arrow:hover{
    cursor: pointer;
  }

  .right_arrow{ 
  ...

JavaScript

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

        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 = $pictureFrame.find("#iz_thumbs");

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

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

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

            var $span = $('<span></span>'),
                $this = $(this),
                $newImg = $this.clone().height(options.height - 100),
                $previewImg = $this.clone().height(options.previewHeight);

            $this.mouseover(function(){
                $this.css("cursor","pointer");
            });

            $this.height(100);

            $this.click(function(){
                $("#iz_main").find("img").remove().end().append($newImg);
            });

            $previewImg.click(function(){
                show($overlay,$pictureFrame,options);
            }).
            hover(function(){
                $(this).css({"cursor" : "pointer"});
            });

           ...