eessppeelllloo/image-sequencer
1
0
Fork 0
mirror of https://github.com/publiclab/image-sequencer.git synced 2025-12-12 03:10:03 +01:00
Code Issues Packages Projects Releases Wiki Activity

Requested Changed Made

Browse Source
This commit is contained in:
Chinmay Pandhare
2017-07-08 19:03:38 +05:30
parent 10f9a19ca3
commit ef8cd3a9d8
2 changed files with 16 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
examples/replace.html Normal file
View File

@@ -0,0 +1,63 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Replace Image Demo | Image Sequencer</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="content-type" content="text/html; charset=UTF8">
<link href="../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="../node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="../dist/image-sequencer.css" rel="stylesheet">
<script src="../node_modules/jquery/dist/jquery.min.js"></script>
<script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="../dist/image-sequencer.js"></script>
</head>
<body>
<div class="header">
<h1>Image Sequencer</h1>
<h3>
<a href="https://github.com/publiclab/image-sequencer"><i class="fa fa-github"></i></a>
</h3>
</div>
<p style="display:none;" class="spinner"><i class="fa fa-spinner fa-spin"></i></p>
<div class="panels">
<div class="panel ismod-image-select" style="display:flex;justify-content:center">
<img src="replace.jpg" id="pencils" style="cursor:pointer">
</div>
</div>
<div class="mod-new-panel" style="display:flex;justify-content:center">
<p class="lead" style="text-align:center">
Click on the image above to invert it.<br>
(This may take a few seconds)<br>
Syntax:</p>
</div>
<div class="log">
<h4>var sequencer = new ImageSequencer();</h4><br>
<h4>sequencer.replaceImage('#pencils','invert');</h4>
</div>
<script>
var sequencer = ImageSequencer();
document.querySelector('#pencils').onclick = function() {
sequencer.replaceImage('#pencils','invert');
}
</script>
</body>
</html>