ImageGrid/ui/gallery.html

<!--
-->

<link rel="stylesheet" href="gallery.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>
<!-- 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)

	// setup the dragging framework...
	// XXX make this work seamlessly with touchSwipe...
	$('.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="demote">^</div>
		<div class="prev-image">&lt;</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">&gt;</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="centerCurrentImage()">center current</button>
	<button onclick="centerOrigin()">center origin</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 (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="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 : -->