Refinement and seperation of CSS. Creation of slide transition basic …

…functionality
getdave · Jun 22, 2011 · 6c57418 · 6c57418
1 parent dc6ce91
commit 6c57418
Show file tree

Hide file tree

Showing 6 changed files with 237 additions and 49 deletions.
diff --git a/css/protoshow.css b/css/protoshow.css
@@ -1,44 +1,70 @@
-* {
-	margin: 0;
-	padding: 0;
-}
-
-body {
-	font-size: 12px;
-	background-color: #f7f7f7;
-}
-
+/* ####################################### */
+/* ########### STANDARD SETUP ############ */
+/* ####################################### */
 
-
-.proto-show {
+.protoshow,
+.protoshow .show {
 	position: relative;
-	width: 900px;
-	height: 300px;
-	margin: 50px;
-	font-family: Arial, sans-serif;
 }
 
-.proto-show ul.show {
+.protoshow .show {
 	margin: 0;
 	padding: 0;
 	list-style: none;
-	height: 300px;
 	width: 900px;
-	position: relative;
--moz-box-shadow:0 0 10px #333333;
-	}
-
+	height: 300px;
+}
 
 .slide {
 	position: absolute;
 	top: 0;
 	left: 0;
+	z-index: 99;
 }
 
-li.active-slide {
+.active-slide {
 	z-index: 100;
 }
 
+/* TRANSITION SLIDE
+------------------------------------------------*/
+
+.transition-slide .show-window {
+	overflow: hidden;
+	position: relative;
+}
+
+.transition-slide .show {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 999999px;
+}
+
+.transition-slide .slide {
+	position: static; /*overide*/
+	float: left;
+	display: block;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+/*
 .proto-navigation {
 	margin: 0;
 	padding: 0;
@@ -60,7 +86,7 @@ li.active-slide {
 	width: 8px;
 	height: 8px;
 	text-decoration: none;
-	background-color: rgba(255,255,255,0.5);    /*#E4E5E6;*/
+	background-color: rgba(255,255,255,0.5);    
 	border: 1px solid #090809;
 	color: #666;
 	text-indent: -9999px;
@@ -79,7 +105,7 @@ li.active-slide {
 
 .proto-navigation li.current-slide a:link,
 .proto-navigation li.current-slide a:visited {
-	background-color: rgba(30,30,30,0.9);/*#323232;*/
+	background-color: rgba(30,30,30,0.9);
 
 }
 
@@ -162,4 +188,4 @@ li.active-slide {
 	top: 10px;
 	right: 10px;
 	z-index: 9999;
-}
+}*/
diff --git a/css/reset.css b/css/reset.css
@@ -0,0 +1,102 @@
+/* 
+html5doctor.com Reset Stylesheet
+v1.6.1
+Last Updated: 2010-09-17
+Author: Richard Clark - http://richclarkdesign.com 
+Twitter: @rich_clark
+*/
+
+html, body, div, span, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+abbr, address, cite, code,
+del, dfn, em, img, ins, kbd, q, samp,
+small, strong, sub, sup, var,
+b, i,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section, summary,
+time, mark, audio, video {
+    margin:0;
+    padding:0;
+    border:0;
+    outline:0;
+    font-size:100%;
+    vertical-align:baseline;
+    background:transparent;
+}
+
+body {
+    line-height:1;
+}
+
+article,aside,details,figcaption,figure,
+footer,header,hgroup,menu,nav,section { 
+    display:block;
+}
+
+nav ul {
+    list-style:none;
+}
+
+blockquote, q {
+    quotes:none;
+}
+
+blockquote:before, blockquote:after,
+q:before, q:after {
+    content:'';
+    content:none;
+}
+
+a {
+    margin:0;
+    padding:0;
+    font-size:100%;
+    vertical-align:baseline;
+    background:transparent;
+}
+
+/* change colours to suit your needs */
+ins {
+    background-color:#ff9;
+    color:#000;
+    text-decoration:none;
+}
+
+/* change colours to suit your needs */
+mark {
+    background-color:#ff9;
+    color:#000; 
+    font-style:italic;
+    font-weight:bold;
+}
+
+del {
+    text-decoration: line-through;
+}
+
+abbr[title], dfn[title] {
+    border-bottom:1px dotted;
+    cursor:help;
+}
+
+table {
+    border-collapse:collapse;
+    border-spacing:0;
+}
+
+/* change border colour to suit your needs */
+hr {
+    display:block;
+    height:1px;
+    border:0;   
+    border-top:1px solid #cccccc;
+    margin:1em 0;
+    padding:0;
+}
+
+input, select {
+    vertical-align:middle;
+}
diff --git a/css/site.css b/css/site.css
@@ -0,0 +1,9 @@
+body {
+	font-size: 12px;
+	background-color: #f7f7f7;
+}
+
+
+.protoshow {
+	padding: 30px;
+}
diff --git a/index.html b/index.html
@@ -19,9 +19,9 @@
 		<!-- Mobile viewport optimized: j.mp/bplateviewport -->
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-
-
-		<link rel="stylesheet" href="css/protoshow.css" media="screen" />
+		<link rel="stylesheet" href="css/reset.css" media="screen" />
+		<link rel="stylesheet" href="css/protoshow.css" media="screen" />				
+		<link rel="stylesheet" href="css/site.css" media="screen" />
 
 		<!-- We're using Google's CDN. You must include these two libraries -->
 		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js"></script>
@@ -32,12 +32,12 @@
 	</head>
 
 	<body>
-		<div id="myshow1" class="proto-show">
+		<div id="myshow1" class="protoshow">
 			<ul class="show">
 				<li class="slide"><img src="img/slide01.jpg" alt="Hiking up Mt. Villarica, Pucon, Chile - &copy; David Smith" /></li>
-				<li class="slide" style="display: none"><img src="img/slide02.jpg" alt="Mountains, Parque Nacional Lauca, Chile - &copy; David Smith" /></li>
-				<li class="slide" style="display: none"><img src="img/slide03.jpg" alt="Mountain reflections - &copy; David Smith" /></li>
-				<li class="slide" style="display: none"><img src="img/slide04.jpg" alt="Leaves in Singapore - &copy; David Smith" /></li>
+				<li class="slide"><img src="img/slide02.jpg" alt="Mountains, Parque Nacional Lauca, Chile - &copy; David Smith" /></li>
+				<li class="slide"><img src="img/slide03.jpg" alt="Mountain reflections - &copy; David Smith" /></li>
+				<li class="slide"><img src="img/slide04.jpg" alt="Leaves in Singapore - &copy; David Smith" /></li>
 			</ul>
 
 			<!-- <ul class="proto-controls">

diff --git a/js/site.js b/js/site.js
@@ -7,7 +7,7 @@
 		/*transitionType	:   function() {
 					console.log("My custom trans");	
 				},*/
-		transitionType	: "fade", 
+		transitionType	: 	"slide", 
 		cc				: 	false
 	});
 

diff --git a/protoshow.js b/protoshow.js
@@ -36,7 +36,7 @@ var protoShow = Class.create({
 			selector			: ".slide",					
 			interval			: 3000,
 			initialSlide		: 1,
-			mode				: 'backward',
+			mode				: 'forward',
 			autoPlay			: true,
 			autoRestart			: true,
 			transitionType		: "slide",
@@ -63,26 +63,29 @@ var protoShow = Class.create({
 		this.element 			= 	$(element);											// DOM element that contains the slideshow
 		this.slides 			= 	this.element.select(this.options.selector);			// Elements that are to be the "Slides"		
 		this.slidesLength		=	this.slides.size();		// Total number of Slides
-		this.interval 			= 	this.options.interval;								// Interval delay between swapping the Slides
+		this.interval 			= 	this.options.interval;	
+		this.transitionTime		=	this.options.transitionTime;					
 		this.currentSlideID 	= 	this.options.initialSlide - 1;		
 		this.nextSlideID		=	this.currentSlideID + 1;
 		this.mode				= 	this[this.options.mode];							// Get play "mode" (forward, backward, random...etc)
 		this.autoPlay			=	this.options.autoPlay;
 
-		if (typeof(this.options.transitionType) == "function") {
-			// If function then user has passed in custom transition function to be used
-			this.transitionType		=	this.options.transitionType;
-		} else {
-			this.transitionType		=	this[this.options.transitionType];
-		}
+
 
 
-
 
 		// define variables before use
 		this.masterTimer		=	false;
 		this.animating			=	false;	// boolean for "animating" status
 		this.loopCount			=	0;
+		this.slideWidth			=	0;
+		this.slideHeight		=	0;
+
+
+
+		//run some initial setup
+		this.setupTransitions(this.options.transitionType);
+
 
 		// let's get things going!
 		this.slides[this.currentSlideID].show().addClassName('active-slide');		
@@ -163,24 +166,72 @@ var protoShow = Class.create({
 	fade: function(current,next,opts) {
 		// Role: Transition function
 		// Type: Fade - fades slides in and out
+
+		var _this = this;
+
 		next.show();
 		current.fade({
-			afterFinish: function() {
+			duration	: _this.transitionTime,
+			afterFinish	: function() {
 				return opts.transitionFinish();
 			}
-		});
-
-
-
+		});	
 	},
 
 	slide: function(current,next,opts) {
 		// Role: Transition function
 		// Type: Slider - slides slides across the screen
-		console.log("Sliding");
+		var _this = this;
+		var moveLeft = this.slideWidth;
+
+		console.log(this.currentSlideID);
+		console.log(this.slidesLength);
+
+		if (this.currentSlideID == this.slidesLength-1) {
+			moveLeft = -(this.slideWidth * (this.slidesLength-1));
+		}
+
+		console.log(moveLeft);
+
+		new Effect.Move(_this.showEle, { 
+			x: -(moveLeft), 
+			y: 0,
+			duration	: _this.transitionTime,
+			afterFinish	: function() {
+				return opts.transitionFinish();
+			}
+		});
 	},
 
 
+	setupTransitions: function(transType) {
+		var _this = this;
+		// Role: Setup basics for transitions
+		if (typeof(transType) == "function") {	// user has defined custom transition function
+			// If function then user has passed in custom transition function to be used
+			this.transitionType		=	transType;
+		} else {	// it's a string
+			this.transitionType		=	this[transType];			
+			this.element.addClassName('transition-' + transType);
+
+			if (transType === "slide") {
+
+				this.showWindow 	=	this.element.down('.show').wrap('div', { 'class': 'show-window' });
+				this.showEle		=	this.showWindow.down('.show');
+				var slideLayout 	= 	this.slides[0].getLayout();
+				this.slideWidth  	= 	slideLayout.get('width');
+				this.slideHeight 	= 	slideLayout.get('height');
+
+
+
+
+				this.showWindow.setStyle({
+					width	: 	_this.slideWidth + "px",
+				  	height	: 	_this.slideHeight + "px"
+				});
+			}		
+		}	
+	},