ImageGrid/ui/gallery.html

<!--
-->

<link rel="stylesheet" href="gallery.css">
<link rel="stylesheet" href="single-image-mode.css">
<link rel="stylesheet" href="transitions.css">

<link rel="stylesheet" href="markers.css">

<style>

body {
	margin: 0;
	padding: 0;
}
	

.viewer {
	margin: 20px;
	border: solid blue 5px;
}

</style>

<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()

	// XXX
	setBackgroundMode('dark')

	// setup event handlers...
	setupEvents()
	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()

	// XXX get the timing right
	// XXX fire this when all is done, via an event...
	$('.loading').delay(500).fadeOut(700)
}
$(document).ready(setup);



</script>

<style>
</style>

<div class="viewer no-single-image-transitions">
	<div class="loading">
		<!-- XXX replace this with a background-image logo... -->
		<table width="100%" height="100%"><tr><td align="center" valign="middle">
			<big><b>ImageGrid</b></big><br>
			<small><i>loading...</i></small>
		</td></tr></table>
	</div>
	<div class="controller-mini left">
		<div class="screen-button show-controls">*</div>
		<div class="screen-button"></div>
	</div>
	<div class="controller left">
		<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">?</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-mini right">
		<div class="screen-button settings">?</div>
		<div class="screen-button"></div>
	</div>
	<div class="controller right">
		<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 Markers (m)</button>
	<button onclick="toggleBackgroundModes()">toggle background modes (b)</button>
	<button onclick="toggleControls()">toggle screen controls (tab)</button>

	<br><br>

	<button onclick="centerCurrentImage()">center current (o)</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 (h)</button>
	<button onclick="moveViewUp()">Up (k)</button>
	<button onclick="moveViewDown()">Down (j)</button>
	<button onclick="moveViewRight()">right (l)</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')" disabled>create ribbon above (helper)</button><br>
	<button onclick="createRibbonBelow('next')" disabled>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 : -->