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

		if($(this).hasClass('current-image')){
			//return true
		}

		// switch classes...
		$(this).parents().siblings().children(".image").removeClass("current-image");
		$(this).siblings(".image").removeClass("current-image");

		$(this).siblings().children(".image").removeClass("current-image");
		$(this).parents().siblings(".ribbon").removeClass("current-ribbon");

		$(this).addClass("current-image");
		$(this).parents(".ribbon").addClass("current-ribbon");

		var container = $(this).parents('.container')
		var field = $(this).parents(".field")
		var cur_ribbon = $(this).parents('.current-ribbon')
		var cur_image = $(this)

		var container_offset = container.offset()
		var ribbon_offset = cur_ribbon.offset()
		var image_offset = cur_image.offset()

		// center the current image...
		field.animate({
				// XXX need to make these more accurate and robust...
				// XXX this is dependant on size and is really jumpy...
				top: (container_offset.top - ribbon_offset.top + parseInt(field.css('top'))) + (container.innerHeight() - cur_image.outerHeight())/2, 
				left: (container_offset.left - image_offset.left + parseInt(field.css('left'))) + (container.innerWidth() - cur_image.outerWidth())/2 
			}, 300)


		e.preventDefault();
	});

	// set the default position...
	$('.current-image').click()
});

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



</script>

<style>
	.mock-image {
		position: relative;
		display: inline-block;
		width: 100px;
		height: 60px;

		background: blue;

		-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;
	}

	.container {
		overflow: hidden;
		width: 400px;
		height: 200px;
	}

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

	.ribbon {
		height: 65px;
		width: 2000px;
		overflow: visible;
		padding-top: 2px;
		padding-bottom: 2px;
		/* XXX this kills positioning... */
		/*
		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 {
		background: red;
	}

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

		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 {
	}
</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>

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