mirror of
https://github.com/fengyuanchen/viewerjs.git
synced 2026-01-18 15:13:13 +00:00
249 lines
14 KiB
HTML
249 lines
14 KiB
HTML
<!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="keywords" content="HTML, CSS, JS, JavaScript, image viewing, viewer, viewerjs, viewer.js, front-end, web development">
|
|
<meta name="author" content="Fengyuan Chen">
|
|
<title>Viewer.js</title>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/css/tether.min.css">
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
|
|
<link rel="stylesheet" href="css/viewer.css">
|
|
<link rel="stylesheet" href="css/main.css">
|
|
</head>
|
|
<body>
|
|
<!--[if lt IE 9]>
|
|
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
|
|
<![endif]-->
|
|
|
|
<!-- Header -->
|
|
<header class="navbar navbar-light navbar-toggleable-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">
|
|
<nav class="nav navbar-nav">
|
|
<a class="nav-link" href="https://github.com/fengyuanchen/viewerjs/blob/master/README.md">Docs</a>
|
|
<a class="nav-link" href="https://github.com/fengyuanchen/viewerjs">GitHub</a>
|
|
<a class="nav-link" href="https://fengyuanchen.github.io">More</a>
|
|
<a class="nav-link" href="http://chenfengyuan.com">About</a>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Jumbotron -->
|
|
<div class="jumbotron docs-jumbotron">
|
|
<div class="container">
|
|
<h1>Viewer.js <small class="version">v0.6.1</small></h1>
|
|
<p class="lead">JavaScript image viewer.</p>
|
|
<div class="docs-carbonads-container">
|
|
<div class="docs-carbonads">
|
|
<script id="_carbonads_js" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=fengyuanchen" async></script>
|
|
</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" name="inline" data-value="false" autocomplete="off" checked> Modal mode
|
|
</label>
|
|
<label class="btn btn-primary">
|
|
<input type="radio" name="inline" data-value="true" autocomplete="off"> Inline mode
|
|
</label>
|
|
</div>
|
|
<button class="btn btn-primary btn-block hidden-md-up" id="toggle-options" data-target="#options" data-toggle="collapse" aria-expanded="true">Toggle options</button>
|
|
<div class="docs-collapse collapse" id="options" aria-labelledby="toggle-options">
|
|
<ul class="list-group">
|
|
<li class="list-group-item">
|
|
<label class="form-check-label">
|
|
<input class="form-check-input" type="checkbox" name="button" checked> button
|
|
</label>
|
|
</li>
|
|
<li class="list-group-item">
|
|
<label class="form-check-label">
|
|
<input class="form-check-input" type="checkbox" name="navbar" checked> navbar
|
|
</label>
|
|
</li>
|
|
<li class="list-group-item">
|
|
<label class="form-check-label">
|
|
<input class="form-check-input" type="checkbox" name="title" checked> title
|
|
</label>
|
|
</li>
|
|
<li class="list-group-item">
|
|
<label class="form-check-label">
|
|
<input class="form-check-input" type="checkbox" name="toolbar" checked> toolbar
|
|
</label>
|
|
</li>
|
|
<li class="list-group-item">
|
|
<label class="form-check-label">
|
|
<input class="form-check-input" type="checkbox" name="tooltip" checked> tooltip
|
|
</label>
|
|
</li>
|
|
<li class="list-group-item">
|
|
<label class="form-check-label">
|
|
<input class="form-check-input" type="checkbox" name="movable" checked> movable
|
|
</label>
|
|
</li>
|
|
<li class="list-group-item">
|
|
<label class="form-check-label">
|
|
<input class="form-check-input" type="checkbox" name="zoomable" checked> zoomable
|
|
</label>
|
|
</li>
|
|
<li class="list-group-item">
|
|
<label class="form-check-label">
|
|
<input class="form-check-input" type="checkbox" name="rotatable" checked> rotatable
|
|
</label>
|
|
</li>
|
|
<li class="list-group-item">
|
|
<label class="form-check-label">
|
|
<input class="form-check-input" type="checkbox" name="scalable" checked> scalable
|
|
</label>
|
|
</li>
|
|
<li class="list-group-item">
|
|
<label class="form-check-label">
|
|
<input class="form-check-input" type="checkbox" name="transition" checked> transition
|
|
</label>
|
|
</li>
|
|
<li class="list-group-item">
|
|
<label class="form-check-label">
|
|
<input class="form-check-input" type="checkbox" name="fullscreen" checked> fullscreen
|
|
</label>
|
|
</li>
|
|
<li class="list-group-item">
|
|
<label class="form-check-label">
|
|
<input class="form-check-input" type="checkbox" name="keyboard" checked> keyboard
|
|
</label>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-8 col-md-6">
|
|
<h3>Demo</h3>
|
|
<hr>
|
|
<div class="docs-galley">
|
|
<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">
|
|
<input type="text" class="form-control" id="viewIndex" name="index" value="4" placeholder="index">
|
|
<span class="input-group-btn">
|
|
<button type="button" class="btn btn-primary" data-enable="inline" data-method="view" data-target="#viewIndex" title="View one of the images with image's index">View</button>
|
|
</span>
|
|
</div>
|
|
<div class="input-group">
|
|
<input type="text" class="form-control" id="zoomRatio" name="ratio" value="0.5" placeholder="ratio">
|
|
<span class="input-group-btn">
|
|
<button type="button" class="btn btn-primary" data-enable="inline" data-method="zoom" data-target="#zoomRatio" title="Zoom the image">Zoom</button>
|
|
</span>
|
|
</div>
|
|
<div class="input-group">
|
|
<input type="text" class="form-control" id="zoomToRatio" name="ratio" value="1" placeholder="ratio">
|
|
<span class="input-group-btn">
|
|
<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>
|
|
</div>
|
|
<div class="input-group">
|
|
<input type="text" class="form-control" id="rotateDegrees" name="degrees" value="90" placeholder="degrees">
|
|
<span class="input-group-btn">
|
|
<button type="button" class="btn btn-primary" data-enable="inline" data-method="rotate" data-target="#rotateDegrees" title="Rotate the image">Rotate</button>
|
|
</span>
|
|
</div>
|
|
<div class="input-group">
|
|
<input type="text" class="form-control" id="rotateToDegrees" name="degrees" value="360" placeholder="degrees">
|
|
<span class="input-group-btn">
|
|
<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>
|
|
</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="docs-footer">
|
|
<div class="container">
|
|
<p class="heart"></p>
|
|
<nav class="nav flex-wrap justify-content-center">
|
|
<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="http://chenfengyuan.com">About</a>
|
|
</nav>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- Scripts -->
|
|
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
|
|
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
|
|
<script src="https://fengyuanchen.github.io/js/common.js"></script>
|
|
<script src="js/viewer.js"></script>
|
|
<script src="js/main.js"></script>
|
|
</body>
|
|
</html>
|