JSFiddle - React, Tailwind, and code Playground

by bittersweetryan

HTML

<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.imagezoom.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#images").imagezoom($("#preview"));
        });
    </script>
</head>
<body>
    <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>
    </ul>
</body>
</html>

CSS

.zoom_pictureFrame{
    width: 700px; 
    background-color: #ffffff;
    height: 500px;
    border: 6px solid black;
    position: fixed;
    z-index:9999;
    moz-border-radius: 5px;
    webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 6px 6px 5px #888;
    -webkit-box-shadow: 6px 6px 5px #888;
    box-shadow: 6px 6px 5px #888;
    padding: 10px;
    display:inline-block;
    text-align:center;
    margin-left: auto;
    margin-right: auto; 
    overflow: hidden; 
  }
  
  .zoom_thumbs{
    width: 100%;
    height: 120px;
    opacity: .6;
    filter:alpha(opacity=60);
    margin-left: auto;
    margin-right: auto;
    position: absolute;
    z-index:1;
  }
  
  .zoom_main{
    text-align: center; 
  } 
  
  .zoom_overlay{
    width:100%;
    height: 100%;
    margin:0; 
    padding:0;
    opacity: .6;
    filter: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;top:0;bottom:0;right:0;left:0;margin:auto;}
  
  .zoom_close{
    position: absolute;
    top: 10px;
    right: 10px;
    display: block;
    width:auto;
    z-index: 2;
  }
  
  .zoom_close a{
    color: #6E6E6E;
  }

JavaScript

(function( $ ){
  $.fn.imagezoom = function(base){
      var $this = $(this),
          $pictureFrame = getPictureFrame(),
          $overlay = getOverlay(),
          width = 600,
          height = 400;

      $this.remove();

      //loop through images
      $this.find('li>img').each(function(){
        var $span = $('<span></span>'),
            $this = $(this),
            $newImg = $this.clone();
        
       // $this.data("originalSize",$this.size());
        
        $this.mouseover(function(){
          $this.css("cursor","pointer");
        });

        $this.height(100);

        $this.click(function(){

          if($newImg.height() >= height){
            $newImg.height(height);  
          }
          
          $("#iz_main").find("img").remove().end().append($newImg);
        });
        
        $span.append($this);

        $pictureFrame.find("#iz_thumbs").append($span);
      });

      $pictureFrame.find("#iz_close > a").click(function(){

          $pictureFrame.animate({width:0,height:0},function(){
            $pictureFrame.hide();
            $overlay.fadeOut();
          });
      });
       
      $pictureFrame.hide();
      $overlay.hide();

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

        function getLink(){
          var $link = $('<div><a href="#">Detailed Images</a></div>');

          $link.click(function(){
            $overlay.fadeIn('slow',function(){
              $pictureFrame.height(10);
              $pictureFrame.find("#iz_main > img").remove();
              $pictureFrame.show();
              $pictureFrame.animate({width: width, height: height});
            });
          });

          return $link;
        }

      return $this;
  };

  function getOverlay(){
    return $('<div class="zoom_overlay" id="iz_overlay">&nbsp;</div>');
  }

  function getPictureFrame(){
    var $pictureFrame = $('<div class="zoom_pictureFrame" id="iz_pictureFrame" style="width:0;...