<!DOCTYPE html>
|
<html lang="en">
|
<head>
|
<meta charset="utf-8">
|
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
<meta name="description" content="JavaScript image viewer.">
|
<meta name="author" content="Chen Fengyuan">
|
<title>Viewer.js</title>
|
<link rel="stylesheet" href="https://unpkg.com/bootstrap@4/dist/css/bootstrap.min.css" crossorigin="anonymous">
|
<link rel="stylesheet" href="css/viewer.css">
|
<link rel="stylesheet" href="css/main.css">
|
</head>
|
<body>
|
<!--[if lt IE 9]>
|
<div class="alert alert-warning alert-dismissible fade show m-0 rounded-0" role="alert">
|
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
|
<span aria-hidden="true">×</span>
|
</button>
|
You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience.
|
</div>
|
<![endif]-->
|
|
<!-- Header -->
|
<header class="navbar navbar-light navbar-expand-md">
|
<div class="container">
|
<a class="navbar-brand" href="./">Viewer.js</a>
|
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-controls="navbar-collapse" aria-expanded="false" aria-label="Toggle navigation">
|
<span class="navbar-toggler-icon"></span>
|
</button>
|
<div class="collapse navbar-collapse justify-content-end" id="navbar-collapse" role="navigation">
|
<ul class="nav navbar-nav">
|
<li class="nav-item">
|
<a class="nav-link" href="https://github.com/fengyuanchen/viewerjs/blob/master/README.md" data-toggle="tooltip" title="View the documentation">Docs</a>
|
</li>
|
<li class="nav-item dropdown">
|
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
Examples
|
</a>
|
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
|
<a class="dropdown-item" href="examples/custom-title.html">Custom title</a>
|
<a class="dropdown-item" href="examples/custom-toolbar.html">Custom toolbar</a>
|
<a class="dropdown-item" href="examples/dynamic-viewer.html">Dynamic Viewer</a>
|
<a class="dropdown-item" href="examples/moving-range-limit.html">Moving range limit</a>
|
<a class="dropdown-item" href="examples/viewer-in-modal.html">Viewer in modal</a>
|
</div>
|
</li>
|
<li class="nav-item">
|
<a class="nav-link" href="https://github.com/fengyuanchen/viewerjs" data-toggle="tooltip" title="View the GitHub project">GitHub</a>
|
</li>
|
<li class="nav-item">
|
<a class="nav-link" href="https://fengyuanchen.github.io/" data-toggle="tooltip" title="Explore more projects">Explore</a>
|
</li>
|
<li class="nav-item">
|
<a class="nav-link" href="https://chenfengyuan.com/" data-toggle="tooltip" title="About the author">About</a>
|
</li>
|
</ul>
|
</div>
|
</div>
|
</header>
|
|
<!-- Jumbotron -->
|
<div class="jumbotron bg-primary text-white rounded-0">
|
<div class="container">
|
<div class="row">
|
<div class="col-md">
|
<h1>Viewer.js <small class="h6">v1.9.1</small></h1>
|
<p class="lead">JavaScript image viewer.</p>
|
</div>
|
<div class="col-md">
|
<div class="carbonads">
|
<script id="_carbonads_js" src="https://cdn.carbonads.com/carbon.js?serve=CKYI55Q7&placement=fengyuanchengithubio" async></script>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<!-- Content -->
|
<div class="container">
|
<h1>Overview</h1>
|
<hr>
|
<div class="row">
|
<div class="col-sm-12 col-md-3">
|
<h3>Options</h3>
|
<hr>
|
<div class="docs-toggles">
|
<div class="btn-group d-flex" data-toggle="buttons" role="group">
|
<label class="btn btn-primary active">
|
<input type="radio" class="sr-only" name="inline" data-value="false" autocomplete="off" checked> Modal mode
|
</label>
|
<label class="btn btn-primary">
|
<input type="radio" class="sr-only" name="inline" data-value="true" autocomplete="off"> Inline mode
|
</label>
|
</div>
|
<button class="btn btn-primary btn-block mb-3 d-md-none" id="toggle-options" data-target="#options" data-toggle="collapse" aria-expanded="true">Toggle options</button>
|
<div class="docs-collapse collapse d-md-block mb-3" id="options" aria-labelledby="toggle-options">
|
<ul class="list-group">
|
<li class="list-group-item">
|
<div class="form-check">
|
<input class="form-check-input" id="backdrop" type="checkbox" name="backdrop" checked>
|
<label for="backdrop" class="form-check-label">backdrop</label>
|
</div>
|
</li>
|
<li class="list-group-item">
|
<div class="form-check">
|
<input class="form-check-input" id="button" type="checkbox" name="button" checked>
|
<label for="button" class="form-check-label">button</label>
|
</div>
|
</li>
|
<li class="list-group-item">
|
<div class="form-check">
|
<input class="form-check-input" id="focus" type="checkbox" name="focus" checked>
|
<label for="focus" class="form-check-label">focus</label>
|
</div>
|
</li>
|
<li class="list-group-item">
|
<div class="form-check">
|
<input class="form-check-input" id="fullscreen" type="checkbox" name="fullscreen" checked>
|
<label for="fullscreen" class="form-check-label">fullscreen</label>
|
</div>
|
</li>
|
<li class="list-group-item">
|
<div class="form-check">
|
<input class="form-check-input" id="loading" type="checkbox" name="loading" checked>
|
<label for="loading" class="form-check-label">loading</label>
|
</div>
|
</li>
|
<li class="list-group-item">
|
<div class="form-check">
|
<input class="form-check-input" id="loop" type="checkbox" name="loop" checked>
|
<label for="loop" class="form-check-label">loop</label>
|
</div>
|
</li>
|
<li class="list-group-item">
|
<div class="form-check">
|
<input class="form-check-input" id="keyboard" type="checkbox" name="keyboard" checked>
|
<label for="keyboard" class="form-check-label">keyboard</label>
|
</div>
|
</li>
|
<li class="list-group-item">
|
<div class="form-check">
|
<input class="form-check-input" id="movable" type="checkbox" name="movable" checked>
|
<label for="movable" class="form-check-label">movable</label>
|
</div>
|
</li>
|
<li class="list-group-item">
|
<div class="form-check">
|
<input class="form-check-input" id="navbar" type="checkbox" name="navbar" checked>
|
<label for="navbar" class="form-check-label">navbar</label>
|
</div>
|
</li>
|
<li class="list-group-item">
|
<div class="form-check">
|
<input class="form-check-input" id="rotatable" type="checkbox" name="rotatable" checked>
|
<label for="rotatable" class="form-check-label">rotatable</label>
|
</div>
|
</li>
|
<li class="list-group-item">
|
<div class="form-check">
|
<input class="form-check-input" id="scalable" type="checkbox" name="scalable" checked>
|
<label for="scalable" class="form-check-label">scalable</label>
|
</div>
|
</li>
|
<li class="list-group-item">
|
<div class="form-check">
|
<input class="form-check-input" id="slideOnTouch" type="checkbox" name="slideOnTouch" checked>
|
<label for="slideOnTouch" class="form-check-label">slideOnTouch</label>
|
</div>
|
</li>
|
<li class="list-group-item">
|
<div class="form-check">
|
<input class="form-check-input" id="title" type="checkbox" name="title" checked>
|
<label for="title" class="form-check-label">title</label>
|
</div>
|
</li>
|
<li class="list-group-item">
|
<div class="form-check">
|
<input class="form-check-input" id="toggleOnDblclick" type="checkbox" name="toggleOnDblclick" checked>
|
<label for="toggleOnDblclick" class="form-check-label">toggleOnDblclick</label>
|
</div>
|
</li>
|
<li class="list-group-item">
|
<div class="form-check">
|
<input class="form-check-input" id="toolbar" type="checkbox" name="toolbar" checked>
|
<label for="toolbar" class="form-check-label">toolbar</label>
|
</div>
|
</li>
|
<li class="list-group-item">
|
<div class="form-check">
|
<input class="form-check-input" id="tooltip" type="checkbox" name="tooltip" checked>
|
<label for="tooltip" class="form-check-label">tooltip</label>
|
</div>
|
</li>
|
<li class="list-group-item">
|
<div class="form-check">
|
<input class="form-check-input" id="transition" type="checkbox" name="transition" checked>
|
<label for="transition" class="form-check-label">transition</label>
|
</div>
|
</li>
|
<li class="list-group-item">
|
<div class="form-check">
|
<input class="form-check-input" id="zoomable" type="checkbox" name="zoomable" checked>
|
<label for="zoomable" class="form-check-label">zoomable</label>
|
</div>
|
</li>
|
<li class="list-group-item">
|
<div class="form-check">
|
<input class="form-check-input" id="zoomOnTouch" type="checkbox" name="zoomOnTouch" checked>
|
<label for="zoomOnTouch" class="form-check-label">zoomOnTouch</label>
|
</div>
|
</li>
|
<li class="list-group-item">
|
<div class="form-check">
|
<input class="form-check-input" id="zoomOnWheel" type="checkbox" name="zoomOnWheel" checked>
|
<label for="zoomOnWheel" class="form-check-label">zoomOnWheel</label>
|
</div>
|
</li>
|
</ul>
|
</div>
|
</div>
|
</div>
|
<div class="col-sm-8 col-md-6">
|
<h3>Demo</h3>
|
<hr>
|
<div class="docs-galley mb-3">
|
<ul class="docs-pictures clearfix">
|
<li><img data-original="images/tibet-1.jpg" src="images/thumbnails/tibet-1.jpg" alt="Cuo Na Lake"></li>
|
<li><img data-original="images/tibet-2.jpg" src="images/thumbnails/tibet-2.jpg" alt="Tibetan Plateau"></li>
|
<li><img data-original="images/tibet-3.jpg" src="images/thumbnails/tibet-3.jpg" alt="Jokhang Temple"></li>
|
<li><img data-original="images/tibet-4.jpg" src="images/thumbnails/tibet-4.jpg" alt="Potala Palace 1"></li>
|
<li><img data-original="images/tibet-5.jpg" src="images/thumbnails/tibet-5.jpg" alt="Potala Palace 2"></li>
|
<li><img data-original="images/tibet-6.jpg" src="images/thumbnails/tibet-6.jpg" alt="Potala Palace 3"></li>
|
<li><img data-original="images/tibet-7.jpg" src="images/thumbnails/tibet-7.jpg" alt="Lhasa River"></li>
|
<li><img data-original="images/tibet-8.jpg" src="images/thumbnails/tibet-8.jpg" alt="Namtso 1"></li>
|
<li><img data-original="images/tibet-9.jpg" src="images/thumbnails/tibet-9.jpg" alt="Namtso 2"></li>
|
</ul>
|
</div>
|
</div>
|
<div class="col-sm-4 col-md-3">
|
<h3>Methods</h3>
|
<hr>
|
<div class="docs-buttons" role="group">
|
<div class="input-group">
|
<span class="input-group-prepend">
|
<button type="button" class="btn btn-primary" data-method="view" data-target="#viewIndex" title="View one of the images with image's index">View</button>
|
</span>
|
<input type="text" class="form-control" id="viewIndex" name="index" value="4" placeholder="index">
|
</div>
|
<div class="input-group">
|
<span class="input-group-prepend">
|
<button type="button" class="btn btn-primary" data-enable="inline" data-method="zoom" data-target="#zoomRatio" title="Zoom the image">Zoom</button>
|
</span>
|
<input type="text" class="form-control" id="zoomRatio" name="ratio" value="0.5" placeholder="ratio">
|
</div>
|
<div class="input-group">
|
<span class="input-group-prepend">
|
<button type="button" class="btn btn-primary" data-enable="inline" data-method="zoomTo" data-target="#zoomToRatio" title="Zoom the image to a special ratio">Zoom To</button>
|
</span>
|
<input type="text" class="form-control" id="zoomToRatio" name="ratio" value="1" placeholder="ratio">
|
</div>
|
<div class="input-group">
|
<span class="input-group-prepend">
|
<button type="button" class="btn btn-primary" data-enable="inline" data-method="rotate" data-target="#rotateDegrees" title="Rotate the image">Rotate</button>
|
</span>
|
<input type="text" class="form-control" id="rotateDegrees" name="degrees" value="90" placeholder="degrees">
|
</div>
|
<div class="input-group">
|
<span class="input-group-prepend">
|
<button type="button" class="btn btn-primary" data-enable="inline" data-method="rotateTo" data-target="#rotateToDegrees" title="Rotate the image to a special angle">Rotate To</button>
|
</span>
|
<input type="text" class="form-control" id="rotateToDegrees" name="degrees" value="360" placeholder="degrees">
|
</div>
|
<div class="btn-group d-flex" role="group">
|
<button type="button" class="btn btn-primary" data-arguments="[0.5]" data-enable="inline" data-method="zoom" title="Zoom in">Zoom In</button>
|
<button type="button" class="btn btn-primary" data-arguments="[-0.5]" data-enable="inline" data-method="zoom" title="Zoom out">Zoom out</button>
|
</div>
|
<div class="btn-group d-flex" role="group">
|
<button type="button" class="btn btn-primary" data-arguments="[-90]" data-enable="inline" data-method="rotate" title="Rotate left">Rotate Left</button>
|
<button type="button" class="btn btn-primary" data-arguments="[90]" data-enable="inline" data-method="rotate" title="Rotate right">Rotate Right</button>
|
</div>
|
<div class="btn-group d-flex" role="group">
|
<button type="button" class="btn btn-primary" data-arguments="[-1]" data-enable="inline" data-method="scaleX" title="Flip horizontal">Flip horizontal</button>
|
<button type="button" class="btn btn-primary" data-arguments="[-1]" data-enable="inline" data-method="scaleY" title="Flip vertical">Flip vertical</button>
|
</div>
|
<div class="btn-group d-flex" role="group">
|
<button type="button" class="btn btn-primary" data-arguments="[-10,0]" data-enable="inline" data-method="move" title="Move left">Left</button>
|
<button type="button" class="btn btn-primary" data-arguments="[10,0]" data-enable="inline" data-method="move" title="Move right">Right</button>
|
<button type="button" class="btn btn-primary" data-arguments="[0,-10]" data-enable="inline" data-method="move" title="Move up">Up</button>
|
<button type="button" class="btn btn-primary" data-arguments="[0,10]" data-enable="inline" data-method="move" title="Move down">Down</button>
|
</div>
|
<div class="btn-group d-flex" role="group">
|
<button type="button" class="btn btn-primary" data-enable="inline" data-method="prev" title="View previous image">Prev</button>
|
<button type="button" class="btn btn-primary" data-enable="inline" data-method="next" title="View next image">Next</button>
|
<button type="button" class="btn btn-primary" data-enable="inline" data-method="play" title="Play the images">Play</button>
|
<button type="button" class="btn btn-primary" data-enable="inline" data-method="stop" title="Stop the playing">Stop</button>
|
</div>
|
<div class="btn-group d-flex" role="group">
|
<button type="button" class="btn btn-primary" data-enable="modal" data-method="show" title="Show the viewer">Show</button>
|
<button type="button" class="btn btn-primary" data-method="hide" title="Hide the viewer" disabled>Hide</button>
|
<button type="button" class="btn btn-primary" data-enable="inline" data-method="full" title="Enter modal mode">Full</button>
|
<button type="button" class="btn btn-primary" data-method="exit" title="Exit modal mode" disabled>Exit</button>
|
</div>
|
<div class="btn-group d-flex" role="group">
|
<button type="button" class="btn btn-primary" data-enable="inline" data-method="reset">Reset</button>
|
<button type="button" class="btn btn-primary" data-enable="inline" data-method="tooltip">Tooltip</button>
|
</div>
|
<button type="button" class="btn btn-block btn-danger" data-enable="modal inline" data-method="destroy">Destroy</button>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<!-- Footer -->
|
<footer class="footer">
|
<div class="container">
|
<p class="heart"></p>
|
<nav class="nav flex-wrap justify-content-center mb-3">
|
<a class="nav-link" href="https://github.com/fengyuanchen/viewerjs">GitHub</a>
|
<a class="nav-link" href="https://github.com/fengyuanchen/viewerjs/releases">Releases</a>
|
<a class="nav-link" href="https://github.com/fengyuanchen/viewerjs/blob/master/LICENSE">License</a>
|
<a class="nav-link" href="https://chenfengyuan.com/">About</a>
|
</nav>
|
</div>
|
</footer>
|
|
<!-- Scripts -->
|
<script src="https://unpkg.com/jquery@3/dist/jquery.slim.min.js" crossorigin="anonymous"></script>
|
<script src="https://unpkg.com/bootstrap@4/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
|
<script src="https://fengyuanchen.github.io/shared/google-analytics.js" crossorigin="anonymous"></script>
|
<script src="js/viewer.js"></script>
|
<script src="js/main.js"></script>
|
</body>
|
</html>
|
