ImageGrid/ui/gallery.html

<!--
TODO:
- basic structure
	ribbons
	images
	indicators
- basic control elements
	touch zones / buttons
		next
		prev
		shift up
		shift down
		promote
		demote
		zoom in
		zoom out
		toggle single image

ISSUES:
	- jumping...
-->

<script src="jquery.js"></script>
<script>

$(document).ready(function() {
	$(".image").click(function(e) {

		var cur = $(this)

		// switch classes...
		cur.parents().siblings().children(".image").removeClass("current-image")
		cur.siblings(".image").removeClass("current-image")

		cur.siblings().children(".image").removeClass("current-image")
		cur.parents().siblings(".ribbon").removeClass("current-ribbon")

		cur.addClass("current-image")
		cur.parents(".ribbon").addClass("current-ribbon")


		var container = cur.parents('.container')
		var field = cur.parents(".field")

		var image_offset = cur.offset()
		var field_offset = field.offset()

		// center the current image...
		field.css({
				left: field_offset.left - image_offset.left + (container.innerWidth() - cur.innerWidth())/2, 
				top: field_offset.top - image_offset.top + (container.innerHeight() - cur.innerHeight())/2 
			})


		// XXX do I need this???
		e.preventDefault();
	});

	// set the default position...
	$('.current-image').click()
	$(document).bind('keydown', handleKeys)
});

var keys = {
	toggleHelpKeys: [72],
	toggleRibbonView: [32],
	closeKeys: [27, 88, 67],

	previousKeys: [37, 80],
	nextKeys: [39, 78],

	helpShowOnUnknownKey: true
}

function handleKeys(event){
	var code = event.keyCode, fn = $.inArray;
	// XXX
	var _ = (fn(code, keys.closeKeys) >= 0) ? function(){}()
		: (fn(code, keys.nextKeys) >= 0) ? nextImage()
		: (fn(code, keys.previousKeys) >= 0) ? prevImage()
		: (fn(code, keys.toggleRibbonView) >= 0) ? toggleRibbonView()
		// XXX
		: (keys.helpShowOnUnknownKey) ? function(){}()
		: false;
	return false;
}


// modes...
function showRibbon(){
	$('.single-image-mode').removeClass('single-image-mode')
}
function showSingle(){
	$('.field').not('.single-image-mode').addClass('single-image-mode')
}
function toggleRibbonView(){
	if($('.single-image-mode').length > 0){
		showRibbon()
	} else {
		showSingle()
	}
}

// basic navigation...
function prevImage(){
	$('.current-image').prev('.image').click()
}

function nextImage(){
	$('.current-image').next('.image').click()
}

// XXX move to above ribbon...

// XXX move to below ribbon...


// create ribbon above/below helpers...
// XXX

// promote...
// XXX

// demote...
// XXX



</script>

<style>
	.image {
		position: relative;
		display: inline-block;

		opacity: 0.3;

		-webkit-transition: all 0.5s ease;
		-moz-transition: all 0.5s ease;
		-o-transition: all 0.5s ease;
		-ms-transition: all 0.5s ease;	
		transition: all 0.5s ease;

		cursor: hand;
	}

	.mock-image {
		width: 350px;
		height: 350px;

		background: blue;
	}

	.container {
		overflow: hidden;
		width: 800px;
		height: 500px;
	}

	.field {
		position: relative;
		overflow: visible;
		top: 0px;
		left: -100px;

		-webkit-transition: all 0.5s ease;
		-moz-transition: all 0.5s ease;
		-o-transition: all 0.5s ease;
		-ms-transition: all 0.5s ease;	
		transition: all 0.5s ease;
	}

	.ribbon {
		height: 360px;
		width: 5000px;
		overflow: visible;
		padding-top: 2px;
		padding-bottom: 2px;
		text-align: center;
		opacity: 0.2;

		-webkit-transition: all 0.5s ease;
		-moz-transition: all 0.5s ease;
		-o-transition: all 0.5s ease;
		-ms-transition: all 0.5s ease;	
		transition: all 0.5s ease;

	}

	.current-image {
		opacity: 1.0;
	}

	.current-ribbon {
		padding-top: 20px;
		padding-bottom: 20px;

		opacity: 1.0;

		-webkit-transition: all 0.5s ease;
		-moz-transition: all 0.5s ease;
		-o-transition: all 0.5s ease;
		-ms-transition: all 0.5s ease;	
		transition: all 0.5s ease;
	}

	.current-ribbon .image {
	}


	/* single image theme (start everything with .single-image-mode) 
	 *
	 * XXX need to make this touch friendly...
	 */
	.single-image-mode .image {
		opacity: 0.0;
	}

	.single-image-mode .image:hover {
		opacity: 0.5;
	}

	.single-image-mode .current-image:hover, .single-image-mode .current-image {
		opacity: 1.0;
	}


</style>


<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 class="image mock-image"></div>
			<div class="image mock-image"></div>
		</div>
		<div class="ribbon">
			<div class="image mock-image"></div>
			<div class="image mock-image"></div>
			<div class="image mock-image"></div>
			<div class="image mock-image"></div>
			<div class="image mock-image"></div>
		</div>
		<div class="ribbon current-ribbon">
			<div class="image mock-image"></div>
			<div class="image mock-image"></div>
			<div class="image mock-image current-image"></div>
			<div class="image mock-image"></div>
			<div class="image mock-image"></div>
		</div>
		<div class="ribbon">
			<div class="image mock-image"></div>
			<div class="image mock-image"></div>
			<div class="image mock-image"></div>
			<div class="image mock-image"></div>
			<div class="image mock-image"></div>
		</div>
		<div class="ribbon">
			<div class="image mock-image"></div>
			<div class="image mock-image"></div>
			<div class="image mock-image"></div>
			<div class="image mock-image"></div>
			<div class="image mock-image"></div>
		</div>
	</div>
</div>

<button onclick="prevImage()">prev</button>
<button onclick="nextImage()">next</button>

<br><br>

<button onclick="showSingle()">single</button>
<button onclick="showRibbon()">ribbon</button>
<button onclick="toggleRibbonView()">toggle ribbon view</button>


<!-- vim:set ts=4 sw=4 nowrap : -->