mirror of
https://github.com/fengyuanchen/viewerjs.git
synced 2026-01-18 15:13:13 +00:00
282 lines
15 KiB
HTML
282 lines
15 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">
|
|
<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://maxcdn.bootstrapcdn.com/bootstrap/3.3.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-static-top docs-header" id="top">
|
|
<div class="container">
|
|
<div class="navbar-header">
|
|
<button type="button" class="navbar-toggle" data-target="#navbar-collapse" data-toggle="collapse">
|
|
<span class="sr-only">Toggle navigation</span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
</button>
|
|
<a class="navbar-brand" href="./">Viewer.js</a>
|
|
</div>
|
|
<nav class="collapse navbar-collapse" id="navbar-collapse" role="navigation">
|
|
<ul class="nav navbar-nav navbar-right">
|
|
<li><a href="https://github.com/fengyuanchen/viewerjs/blob/master/README.md">Docs</a></li>
|
|
<li><a href="https://github.com/fengyuanchen/viewerjs">GitHub</a></li>
|
|
<li><a href="https://fengyuanchen.github.io">More</a></li>
|
|
<li><a href="http://chenfengyuan.com">About</a></li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Jumbotron -->
|
|
<div class="jumbotron docs-jumbotron">
|
|
<div class="container">
|
|
<h1>Viewer.js <small class="version">v0.5.0</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 class="page-header">Overview</h1>
|
|
<div class="row">
|
|
<div class="col-sm-12 col-md-3">
|
|
<h3 class="page-header">Options</h3>
|
|
<div class="docs-toggles">
|
|
<div class="btn-group btn-group-justified" 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 hidden-lg" 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="checkbox-inline">
|
|
<input type="checkbox" name="button" checked> button
|
|
</label>
|
|
</li>
|
|
<li class="list-group-item">
|
|
<label class="checkbox-inline">
|
|
<input type="checkbox" name="navbar" checked> navbar
|
|
</label>
|
|
</li>
|
|
<li class="list-group-item">
|
|
<label class="checkbox-inline">
|
|
<input type="checkbox" name="title" checked> title
|
|
</label>
|
|
</li>
|
|
<li class="list-group-item">
|
|
<label class="checkbox-inline">
|
|
<input type="checkbox" name="toolbar" checked> toolbar
|
|
</label>
|
|
</li>
|
|
<li class="list-group-item">
|
|
<label class="checkbox-inline">
|
|
<input type="checkbox" name="tooltip" checked> tooltip
|
|
</label>
|
|
</li>
|
|
<li class="list-group-item">
|
|
<label class="checkbox-inline">
|
|
<input type="checkbox" name="movable" checked> movable
|
|
</label>
|
|
</li>
|
|
<li class="list-group-item">
|
|
<label class="checkbox-inline">
|
|
<input type="checkbox" name="zoomable" checked> zoomable
|
|
</label>
|
|
</li>
|
|
<li class="list-group-item">
|
|
<label class="checkbox-inline">
|
|
<input type="checkbox" name="rotatable" checked> rotatable
|
|
</label>
|
|
</li>
|
|
<li class="list-group-item">
|
|
<label class="checkbox-inline">
|
|
<input type="checkbox" name="scalable" checked> scalable
|
|
</label>
|
|
</li>
|
|
<li class="list-group-item">
|
|
<label class="checkbox-inline">
|
|
<input type="checkbox" name="transition" checked> transition
|
|
</label>
|
|
</li>
|
|
<li class="list-group-item">
|
|
<label class="checkbox-inline">
|
|
<input type="checkbox" name="fullscreen" checked> fullscreen
|
|
</label>
|
|
</li>
|
|
<li class="list-group-item">
|
|
<label class="checkbox-inline">
|
|
<input type="checkbox" name="keyboard" checked> keyboard
|
|
</label>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-8 col-md-6">
|
|
<h3 class="page-header">Demo</h3>
|
|
<div class="docs-galley">
|
|
<ul class="docs-pictures clearfix">
|
|
<li><img data-original="img/tibet-1.jpg" src="img/thumbnails/tibet-1.jpg" alt="Cuo Na Lake"></li>
|
|
<li><img data-original="img/tibet-2.jpg" src="img/thumbnails/tibet-2.jpg" alt="Tibetan Plateau"></li>
|
|
<li><img data-original="img/tibet-3.jpg" src="img/thumbnails/tibet-3.jpg" alt="Jokhang Temple"></li>
|
|
<li><img data-original="img/tibet-4.jpg" src="img/thumbnails/tibet-4.jpg" alt="Potala Palace 1"></li>
|
|
<li><img data-original="img/tibet-5.jpg" src="img/thumbnails/tibet-5.jpg" alt="Potala Palace 2"></li>
|
|
<li><img data-original="img/tibet-6.jpg" src="img/thumbnails/tibet-6.jpg" alt="Potala Palace 3"></li>
|
|
<li><img data-original="img/tibet-7.jpg" src="img/thumbnails/tibet-7.jpg" alt="Lhasa River"></li>
|
|
<li><img data-original="img/tibet-8.jpg" src="img/thumbnails/tibet-8.jpg" alt="Namtso 1"></li>
|
|
<li><img data-original="img/tibet-9.jpg" src="img/thumbnails/tibet-9.jpg" alt="Namtso 2"></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-4 col-md-3">
|
|
<h3 class="page-header">Methods</h3>
|
|
<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 btn-group-justified" role="group">
|
|
<div class="btn-group" 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>
|
|
</div>
|
|
<div class="btn-group" role="group">
|
|
<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>
|
|
<div class="btn-group btn-group-justified" role="group">
|
|
<div class="btn-group" role="group">
|
|
<button type="button" class="btn btn-primary" data-arguments="[-90]" data-enable="inline" data-method="rotate" title="Rotate left">Rotate Left</button>
|
|
</div>
|
|
<div class="btn-group" role="group">
|
|
<button type="button" class="btn btn-primary" data-arguments="[90]" data-enable="inline" data-method="rotate" title="Rotate right">Rotate Right</button>
|
|
</div>
|
|
</div>
|
|
<div class="btn-group btn-group-justified" role="group">
|
|
<div class="btn-group" role="group">
|
|
<button type="button" class="btn btn-primary" data-arguments="[-1]" data-enable="inline" data-method="scaleX" title="Flip horizontal">Flip horizontal</button>
|
|
</div>
|
|
<div class="btn-group" role="group">
|
|
<button type="button" class="btn btn-primary" data-arguments="[-1]" data-enable="inline" data-method="scaleY" title="Flip vertical">Flip vertical</button>
|
|
</div>
|
|
</div>
|
|
<div class="btn-group btn-group-justified" role="group">
|
|
<div class="btn-group" role="group">
|
|
<button type="button" class="btn btn-primary" data-arguments="[-10,0]" data-enable="inline" data-method="move" title="Move left">Left</button>
|
|
</div>
|
|
<div class="btn-group" role="group">
|
|
<button type="button" class="btn btn-primary" data-arguments="[10,0]" data-enable="inline" data-method="move" title="Move right">Right</button>
|
|
</div>
|
|
<div class="btn-group" role="group">
|
|
<button type="button" class="btn btn-primary" data-arguments="[0,-10]" data-enable="inline" data-method="move" title="Move up">Up</button>
|
|
</div>
|
|
<div class="btn-group" role="group">
|
|
<button type="button" class="btn btn-primary" data-arguments="[0,10]" data-enable="inline" data-method="move" title="Move down">Down</button>
|
|
</div>
|
|
</div>
|
|
<div class="btn-group btn-group-justified" role="group">
|
|
<div class="btn-group" role="group">
|
|
<button type="button" class="btn btn-primary" data-enable="inline" data-method="prev" title="View previous image">Prev</button>
|
|
</div>
|
|
<div class="btn-group" role="group">
|
|
<button type="button" class="btn btn-primary" data-enable="inline" data-method="next" title="View next image">Next</button>
|
|
</div>
|
|
<div class="btn-group" role="group">
|
|
<button type="button" class="btn btn-primary" data-enable="inline" data-method="play" title="Play the images">Play</button>
|
|
</div>
|
|
<div class="btn-group" role="group">
|
|
<button type="button" class="btn btn-primary" data-enable="inline" data-method="stop" title="Stop the playing">Stop</button>
|
|
</div>
|
|
</div>
|
|
<div class="btn-group btn-group-justified" role="group">
|
|
<div class="btn-group" role="group">
|
|
<button type="button" class="btn btn-primary" data-enable="modal" data-method="show" title="Show the viewer">Show</button>
|
|
</div>
|
|
<div class="btn-group" role="group">
|
|
<button type="button" class="btn btn-primary" data-method="hide" title="Hide the viewer" disabled>Hide</button>
|
|
</div>
|
|
<div class="btn-group" role="group">
|
|
<button type="button" class="btn btn-primary" data-enable="inline" data-method="full" title="Enter modal mode">Full</button>
|
|
</div>
|
|
<div class="btn-group" role="group">
|
|
<button type="button" class="btn btn-primary" data-method="exit" title="Exit modal mode" disabled>Exit</button>
|
|
</div>
|
|
</div>
|
|
<button type="button" class="btn btn-block btn-primary" data-enable="inline" data-method="reset">Reset</button>
|
|
<button type="button" class="btn btn-block btn-primary" data-enable="inline" data-method="tooltip">Tooltip</button>
|
|
<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>
|
|
<ul class="list-inline links">
|
|
<li><a href="https://github.com/fengyuanchen/viewerjs">GitHub</a></li>
|
|
<li><a href="https://github.com/fengyuanchen/viewerjs/releases">Releases</a></li>
|
|
<li><a href="https://github.com/fengyuanchen/viewerjs/blob/master/LICENSE">License</a></li>
|
|
<li><a href="http://chenfengyuan.com">About</a></li>
|
|
</ul>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- Scripts -->
|
|
<script src="https://code.jquery.com/jquery-2.2.2.min.js"></script>
|
|
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.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>
|