ImageGrid/ui/gallery.html

<!--
-->

<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">&lt;</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">&gt;</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 (t)</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 : -->