tlimpanont · August 15, 2013 09:26
diff --git a/index.html b/index.html
 <!doctype html>
 <html>
 <head>
 <meta charset="UTF-8">
        <title>Nieuw document</title>

 		<script src="jquery-1.10.2.js"></script>
 		<script src="jquery-ui-1.10.3.custom.min.js"></script>
 		<script src="underscore-min.js"></script>
 		<script src="backbone-min.js"></script>
 		<style>
 			html, body { margin: 0;}
 			header {
 				width: 100%;
 				height: 60px;
 				background-color: #767676;
 			}
 			#grid_slider_container {
 				background: red;
 				position: absolute;
 			}
 			#grid_slider_viewport {
 				position: absolute;
 				background: transparent;
 			}
 			.grid_slider_item {
 				background: black;
 				position: absolute;
 			}
 		</style>
 		<script>
 			var NA = {};
 			
 			NA.GridSlider = Backbone.View.extend({
 				initialize: function() {
 					this.items = new Array();
 					this.rows = 1;
 					this.columns = 3;
 					this.itemMarginX = 15;
 					this.itemMarginY = 30;
 					this.marginX = 100;
 					this.marginY = 100;	
 					this.$el.wrap("<div id='grid_slider_viewport'></div>");
 					this.$viewport = jQuery("#grid_slider_viewport")
 										
 					this.setViewport();
 					this.setContainer();
 					
 					this.addItems(); 
 					
 					jQuery(window).on("resize", function() {
 						this.setViewport();
 						this.setContainer();
 					}.bind(this));
 					
 				
 				},
 				addItems: function() {
 					for(var columns = 0; columns < this.columns; columns++)
 					{
 						for(var rows = 0; rows < this.rows; rows++)
 						{
 							var item = jQuery("<div class='grid_slider_item' data-column='"+columns+"' data-row='"+rows+"'></div>");
 							var itemWidth = this.getItem().width;
 							var itemHeight = this.getItem().height;
 							item.css({
 								width: ( this.getItem().width / this.getContainer().width) * 100 + "%",
 								height:( this.getItem().height / this.getContainer().height) * 100 + "%"
 							});

 							var itemLeft = ( itemWidth * columns ) + ( this.itemMarginX * columns);
 							var itemTop = ( itemHeight * rows ) + ( this.itemMarginY * rows);

 							item.css({
 								left: (itemLeft / this.getContainer().width) * 100 + "%",
 								top: (itemTop / this.getContainer().height) * 100 + "%"
 							});

 							this.$el.append(item);
 							this.items.push(item);
 						}
 					}
 					
 				},
 				getItem: function() {
 					return {
 						width: ( ( this.getContainer().width - (this.itemMarginX * (this.columns - 1)) ) / this.columns ),
 						height: ( ( this.getContainer().height - (this.itemMarginY * (this.rows - 1)) ) / this.rows )		
 					}	
 				},
 				getViewport: function() {
 					return {
 						width: window.innerWidth,
 						height: ( window.innerHeight - jQuery("header").outerHeight() )
 					}
 				},
 				getContainer: function() {
 					return {
 						width: ( this.getViewport().width ) - (this.marginX * 2),
 						height: ( this.getViewport().height - jQuery("header").outerHeight() ) - (this.marginY * 2)
 					}	
 				},
 				setViewport: function() {
 					this.$viewport.css({
 						width: this.getViewport().width,
 						height: this.getViewport().height,
 						top: jQuery("header")
 					});
 				},
 				setContainer: function() {
 					this.$el.css({
 						width: this.getContainer().width,
 						height: this.getContainer().height
 					}).position({
 						my: "center center",
 						at: "center center",
 						of: this.$viewport
 					});
 				}
 			});
 		
 			jQuery(function() {
 				new NA.GridSlider({
 					el: jQuery("#grid_slider_container")
 				});
 			});
 		</script>
 	</head>
 	<body>
 		<header></header>
 			<div id="grid_slider_container">

 			</div>
 	</body>
 </html>
	<!doctype html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Nieuw document</title>

	<script src="jquery-1.10.2.js"></script>
	<script src="jquery-ui-1.10.3.custom.min.js"></script>
	<script src="underscore-min.js"></script>
	<script src="backbone-min.js"></script>
	<style>
	html, body { margin: 0;}
	header {
	width: 100%;
	height: 60px;
	background-color: #767676;
	}
	#grid_slider_container {
	background: red;
	position: absolute;
	}
	#grid_slider_viewport {
	position: absolute;
	background: transparent;
	}
	.grid_slider_item {
	background: black;
	position: absolute;
	}
	</style>
	<script>
	var NA = {};

	NA.GridSlider = Backbone.View.extend({
	initialize: function() {
	this.items = new Array();
	this.rows = 1;
	this.columns = 3;
	this.itemMarginX = 15;
	this.itemMarginY = 30;
	this.marginX = 100;
	this.marginY = 100;
	this.$el.wrap("<div id='grid_slider_viewport'></div>");
	this.$viewport = jQuery("#grid_slider_viewport")

	this.setViewport();
	this.setContainer();

	this.addItems();

	jQuery(window).on("resize", function() {
	this.setViewport();
	this.setContainer();
	}.bind(this));


	},
	addItems: function() {
	for(var columns = 0; columns < this.columns; columns++)
	{
	for(var rows = 0; rows < this.rows; rows++)
	{
	var item = jQuery("<div class='grid_slider_item' data-column='"+columns+"' data-row='"+rows+"'></div>");
	var itemWidth = this.getItem().width;
	var itemHeight = this.getItem().height;
	item.css({
	width: ( this.getItem().width / this.getContainer().width) * 100 + "%",
	height:( this.getItem().height / this.getContainer().height) * 100 + "%"
	});

	var itemLeft = ( itemWidth * columns ) + ( this.itemMarginX * columns);
	var itemTop = ( itemHeight * rows ) + ( this.itemMarginY * rows);

	item.css({
	left: (itemLeft / this.getContainer().width) * 100 + "%",
	top: (itemTop / this.getContainer().height) * 100 + "%"
	});

	this.$el.append(item);
	this.items.push(item);
	}
	}

	},
	getItem: function() {
	return {
	width: ( ( this.getContainer().width - (this.itemMarginX * (this.columns - 1)) ) / this.columns ),
	height: ( ( this.getContainer().height - (this.itemMarginY * (this.rows - 1)) ) / this.rows )
	}
	},
	getViewport: function() {
	return {
	width: window.innerWidth,
	height: ( window.innerHeight - jQuery("header").outerHeight() )
	}
	},
	getContainer: function() {
	return {
	width: ( this.getViewport().width ) - (this.marginX * 2),
	height: ( this.getViewport().height - jQuery("header").outerHeight() ) - (this.marginY * 2)
	}
	},
	setViewport: function() {
	this.$viewport.css({
	width: this.getViewport().width,
	height: this.getViewport().height,
	top: jQuery("header")
	});
	},
	setContainer: function() {
	this.$el.css({
	width: this.getContainer().width,
	height: this.getContainer().height
	}).position({
	my: "center center",
	at: "center center",
	of: this.$viewport
	});
	}
	});

	jQuery(function() {
	new NA.GridSlider({
	el: jQuery("#grid_slider_container")
	});
	});
	</script>
	</head>
	<body>
	<header></header>
	<div id="grid_slider_container">

	</div>
	</body>
	</html>