IViewer Test

by Subigya Panta

HTML

<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
<script src="https://raw.githubusercontent.com/can3p/iviewer/master/test/jquery.mousewheel.min.js"></script>
<script src="https://raw.githubusercontent.com/can3p/iviewer/master/jquery.iviewer.js"></script>
<link rel="stylesheet" href="https://raw.githubusercontent.com/can3p/iviewer/master/jquery.iviewer.css">
<h1>JQuery.iviewer test</h1>
        <!-- wrapper div is needed for opera because it shows scroll bars for reason -->
<div class="wrapper">
    <span>
        <a id="in" href="#">+</a>
        <a id="out" href="#">-</a>
        <a id="fit" href="#">fit</a>
        <a id="orig" href="#">orig</a>
        <a id="update" href="#">update</a>
    </span>
    <!--<div id="viewer" class="viewer"></div>
    <br /> --->
    <div id="viewer2" class="viewer" style="width: 80%;"></div>
    <br />
    <p>
        <a href="#" id="chimg">Change Image</a>
        <a href="#" id="fill">Fill container</a>
    </p>
</div>

CSS

.viewer
{
    width: 50%;
    height: 500px;
    border: 1px solid black;
    position: relative;
}

.wrapper
{
    overflow: hidden;
}

JavaScript

(function($)
{
    var iv2 = $("#viewer2").iviewer(
                  {
                      src: "http://www.keenthemes.com/preview/metronic/assets/global/plugins/jcrop/demos/demo_files/image2.jpg"
                  });
    
     var fill = false;
    $("#fill").click(function(){
        fill = !fill;
        iv2.iviewer('fill_container', fill);
        return false;
    });
})(jQuery):