mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-11-03 21:00:14 +00:00
137 lines
3.5 KiB
HTML
Executable File
137 lines
3.5 KiB
HTML
Executable File
|
|
<!--
|
|
-->
|
|
|
|
<link rel="stylesheet" href="gallery.css">
|
|
<link rel="stylesheet" href="markers.css">
|
|
<script src="jquery.js"></script>
|
|
|
|
<script src="jquery.touchSwipe.js"></script>
|
|
<!-- script src="jquery.wipetouch.js"></script-->
|
|
<!-- XXX this does not work on android... -->
|
|
<!-- script src="jquery.gestures.js"></script-->
|
|
<!-- XXX need to figure out how to disable all the bling -->
|
|
<!-- script src="jquery.mobile.js"></script-->
|
|
|
|
<!-- XXX STUB -->
|
|
<script src="images.js"></script>
|
|
<script src="gallery-prototype.js"></script>
|
|
|
|
<script src="ui.js"></script>
|
|
<script src="markers.js"></script>
|
|
|
|
<!--script src="gallery.js"></script-->
|
|
|
|
<script>
|
|
|
|
|
|
function setup(){
|
|
// XXX load state...
|
|
// initial state (default)...
|
|
setDefaultInitialState()
|
|
|
|
// setup event handlers...
|
|
setupKeyboard()
|
|
setupGestures()
|
|
setupControlElements()
|
|
|
|
// XXX
|
|
//fieldSize(800, 500)
|
|
|
|
// load images...
|
|
// XXX not allowed...
|
|
//$.getJSON('images.js', loadImages})
|
|
// XXX STUB
|
|
loadImages(image_list)
|
|
|
|
// set the default position and init...
|
|
$('.current.image').click()
|
|
}
|
|
$(document).ready(setup);
|
|
|
|
|
|
|
|
</script>
|
|
|
|
<style>
|
|
</style>
|
|
|
|
<div class="viewer">
|
|
<div class="controller">
|
|
<div class="demote">^</div>
|
|
<div class="prev-image"><</div>
|
|
<div class="promote">v</div>
|
|
<div class="toggle-single">[ ]</div>
|
|
</div>
|
|
<div class="container">
|
|
<div class="field">
|
|
<div class="ribbon">
|
|
<!--div class="image mock-image"></div>
|
|
<div class="image mock-image"></div>
|
|
<div class="image mock-image"></div-->
|
|
</div>
|
|
</div>
|
|
<div class="h-marker"></div>
|
|
<div class="v-marker"></div>
|
|
</div>
|
|
<div class="controller">
|
|
<div class="demote">^</div>
|
|
<div class="next-image">></div>
|
|
<div class="promote">v</div>
|
|
<div class="toggle-wide">+/-</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="demo-buttons">
|
|
<button onclick="toggleMarkers()">Toggle Guides</button>
|
|
|
|
<br><br>
|
|
|
|
<button onclick="firstImage()">first (home)</button>
|
|
<button onclick="prevImage()">prev (left)</button>
|
|
<button onclick="nextImage()">next (right)</button>
|
|
<button onclick="lastImage()">last (end)</button>
|
|
|
|
<!--br><br>
|
|
LEGACY:
|
|
<button onclick="showSingle()">single</button>
|
|
<button onclick="showRibbon()">ribbon</button>
|
|
<button onclick="toggleRibbonView()">toggle ribbon view (f)</button-->
|
|
|
|
<br><br>
|
|
|
|
<button onclick="zoomContainerBy(2)">Zoom in</button>
|
|
<button onclick="zoomContainerBy(0.5)">Zoom out</button>
|
|
<button onclick="setContainerZoom(1)">Original</button>
|
|
<button onclick="fitImage()">Image</button>
|
|
<button onclick="fitThreeImages()">Three</button>
|
|
|
|
<br><br>
|
|
|
|
<button onclick="toggleWideView()">toggle wide view</button>
|
|
|
|
<br><br>
|
|
|
|
<button onclick="createRibbonAbove()" disabled>create ribbon above (helper)</button><br>
|
|
<button onclick="createRibbonBelow()" disabled>create ribbon below (helper)</button>
|
|
|
|
<br><br>
|
|
|
|
<button onclick="mergeRibbonsUp()">merge ribbons up</button><br>
|
|
<button onclick="mergeRibbonsDown()">merge ribbons down</button>
|
|
|
|
<br><br>
|
|
|
|
<button onclick="shiftImageUp()">demote image (shift-up)</button><br>
|
|
<button onclick="shiftImageDown()">promote image (shift-down)</button><br>
|
|
NOTE: ctrl-shift-up / ctrl-shift-down will demote / promote an image to a new empty ribbon (the default if no ribbon exists)
|
|
|
|
<br><br>
|
|
|
|
<button onclick="focusAboveRibbon()">focus above ribbon (up)</button><br>
|
|
<button onclick="focusBelowRibbon()">focus below ribbon (down)</button>
|
|
|
|
</div>
|
|
|
|
<!-- vim:set ts=4 sw=4 nowrap : -->
|