JSFiddle - React, Tailwind, and code Playground

by thindery

HTML

<script src="http://thindery.com/jsfiddle/jquery.iviewer.js"></script>
<script src="http://thindery.com/jsfiddle/jquery.mousewheel.min.js"></script>
<h1>JQuery.iviewer test</h1>
        <!-- wrapper div is needed for opera because it shows scroll bars for reason
https://github.com/can3p/iviewer/wiki
-->
<div class="wrapper">
    <div id="viewer2" class="viewer"></div>
    <div class="image-mask"></div>
</div>
<br />                  
<br />   
<span id="status"></span>

CSS

.image-mask {
    position: absolute;
    left:0; top:0;
    height:215.931px;
    width:504px;
    z-index: 700;
    background: url('http://thindery.com/jsfiddle/mask.png');
    pointer-events: none;
}

.viewer
{
    border: 0px solid black;
    background-color: blue;
    position: absolute;
    left:0; top:0;
    height:215.931px;
    width:504px;
    z-index: 50;
}

.wrapper
{
    z-index: 0;
    position: relative;
    height:215.931px;
    width:504px;
    display: block;
}

.iviewer_common {
    position: absolute;
    bottom: 5px;
    border: 1px  solid #000;
    height: 28px;
    z-index: 5000;
}

.iviewer_cursor {
    cursor: url('http://thindery.com/jsfiddle/img/hand.cur') 6 8, pointer;
}

.iviewer_drag_cursor {
    cursor: url('http://thindery.com/jsfiddle/img/grab.cur') 6 8, pointer;
}

.iviewer_button {
    width: 28px;
    cursor: pointer;
    background-position: center center;
    background-repeat: no-repeat;
}

.iviewer_zoom_in {
    left: 20px;
    background: url('http://thindery.com/jsfiddle/img/iviewer.zoom_in.gif');
}

.iviewer_zoom_out {
    left: 55px;
    background: url('http://thindery.com/jsfiddle/img/iviewer.zoom_out.gif');
}

.iviewer_zoom_zero {
    left: 90px;
    background: url('http://thindery.com/jsfiddle/img/iviewer.zoom_zero.gif');
}

.iviewer_zoom_fit {
    left: 125px;
    background: url('http://thindery.com/jsfiddle/img/iviewer.zoom_fit.gif');
}

.iviewer_zoom_status {
    left: 160px;
    font: 1em/28px Sans;
    color: #000;
    background-color: #fff;
    text-align: center;
    width: 60px;
}

.iviewer_rotate_left {
    left: 227px;
    background: #fff url('http://thindery.com/jsfiddle/img/iviewer.rotate_left.png') center center no-repeat;
}

.iviewer_rotate_right {
    left: 262px;
    background: #fff url('http://thindery.com/jsfiddle/img/iviewer.rotate_right.png') center center no-repeat;
}

JavaScript

$(document).ready(function() {
    var iv2 = $("#viewer2").iviewer({
        src: "http://thindery.com/jsfiddle/test_image2.jpg"
    });
});