mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-10-31 19:30:07 +00:00
162 lines
4.3 KiB
HTML
Executable File
162 lines
4.3 KiB
HTML
Executable File
|
|
<!--
|
|
-->
|
|
|
|
<link rel="stylesheet" href="gallery.css">
|
|
<link rel="stylesheet" href="single-image-mode.css">
|
|
|
|
<link rel="stylesheet" href="markers.css">
|
|
|
|
|
|
<script src="jquery.js"></script>
|
|
<script src="jquery-ui-1.8.22.custom.min.js"></script>
|
|
|
|
<script src="jquery.touchSwipe.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)
|
|
|
|
// setup the dragging framework...
|
|
// XXX make this work seamlessly with touchSwipe...
|
|
// XXX cancel clicks while dragging...
|
|
$('.field').draggable()
|
|
|
|
// set the default position and init...
|
|
$('.current.image').click()
|
|
}
|
|
$(document).ready(setup);
|
|
|
|
|
|
|
|
</script>
|
|
|
|
<style>
|
|
</style>
|
|
|
|
<div class="viewer">
|
|
<div class="controller">
|
|
<div class="screen-button demote">^</div>
|
|
<div class="screen-button prev-image"><</div>
|
|
<div class="screen-button promote">v</div>
|
|
<div class="screen-button toggle-single">[ ]</div>
|
|
<div class="screen-button fit-three">ooo</div>
|
|
<div class="screen-button settings">settings</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="screen-button demote">^</div>
|
|
<div class="screen-button next-image">></div>
|
|
<div class="screen-button promote">v</div>
|
|
<div class="screen-button zoom-in">+</div>
|
|
<div class="screen-button zoom-out">-</div>
|
|
<div class="screen-button toggle-wide">...</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="demo-buttons">
|
|
<button onclick="toggleMarkers()">Toggle Guides</button>
|
|
|
|
<br><br>
|
|
|
|
<button onclick="centerCurrentImage()">center current</button>
|
|
<button onclick="centerOrigin()">center origin</button>
|
|
|
|
<br><br>
|
|
|
|
<button onclick="toggleSingleImageModeTransitions()">toggle single image mode transitions (a)</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>
|
|
|
|
<button onclick="moveViewLeft()">left</button>
|
|
<button onclick="moveViewUp()">Up</button>
|
|
<button onclick="moveViewDown()">Down</button>
|
|
<button onclick="moveViewRight()">right</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="setContainerScale(1)">Original (0)</button>
|
|
<button onclick="fitImage()">Image (1)</button>
|
|
<button onclick="fitThreeImages()">Three (3)</button>
|
|
|
|
<br><br>
|
|
|
|
<button onclick="toggleWideView()">toggle wide view</button>
|
|
|
|
<br><br>
|
|
|
|
<button onclick="createRibbon('prev')">create ribbon above (helper)</button><br>
|
|
<button onclick="createRibbonBelow('next')">create ribbon below (helper)</button>
|
|
|
|
<br><br>
|
|
|
|
<button onclick="mergeRibbons('prev')">merge ribbons up</button><br>
|
|
<button onclick="mergeRibbons('next')">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 : -->
|