Commits

Scott Nixon  committed 41f792b

Working Food Image Slideshow with SlideDeck

  • Participants
  • Parent commits 0f8633c

Comments (0)

Files changed (2)

File design/images/galleryNav.png

Added
New image

File design/returning_person.html

 #nutri-info li {border-bottom: 1px solid #000000; margin: 0; padding: 8px 0 8px 0; line-height: 100%;}
 #nutri-info a {font-size:10px; } 
 
+
+/*::::::::::::::: SLIDEDECK SLIDE STYLE (BEGIN) :::::::::::::::*/
+		
+	<!--	#wrapper{ 
+			width:900px;
+			margin:0 auto;
+		}
+		
+		#slidedeck_frame {
+			width: 620px;
+			height: 380px;
+			position: relative;
+			overflow:hidden;
+			margin:0 auto;
+		}
+		
+		dl.slidedeck {
+			position: relative;
+			width: 100%;
+			height: 100%;
+			margin: 0;
+			padding: 0;
+			float: right;
+			background: #ccc;
+		}
+		
+		dl.slidedeck > dd {
+			position: relative;
+			margin: 0;
+			border-bottom: 1px solid #ccc;
+			overflow: hidden;
+		}
+		-->
+		
+		/*::::::::::::::: SLIDEDECK SLIDE STYLE (END) :::::::::::::::*/
+		
+		/*::::::::::::::: CAPTION STYLE (BEGIN) :::::::::::::::*/
+		
+		div.caption{
+			background: #000;
+			background: rgba(0, 0, 0, 0.7);
+			width: 50%;
+			padding: 10px 20px;
+			-khtml-border-radius: 10px;
+			-webkit-border-radius: 10px;
+			-moz-border-radius: 10px;
+			border-radius: 10px;
+			color: #fff;
+			position: absolute;
+			top: 250px;
+			left: 20px;
+		}
+		
+		div.caption h3, div.caption p, div.title h3, div.title p{
+			margin:0;
+			padding:0;
+			font-size: 12px;
+		}
+		
+		div.caption h3{
+			font-size: 14px;
+		}
+		
+		div.title{
+			padding: 20px 0 0 20px;
+			width: 50%;
+		}
+		
+		div.title h3{
+			font-size:22px;
+			margin: 0 0 10px 0;
+		}
+		
+		/*::::::::::::::: CAPTION STYLE (END) :::::::::::::::*/
+		
+		/*::::::::::::::: VERTICAL NAVIGATION STYLE (BEGIN) :::::::::::::::*/
+		
+		#slidedeck_frame:hover ul.galleryArrows{
+			display:block;
+		}
+		
+		ul.galleryArrows{
+			position:absolute;
+			display: none;
+			margin: -14px 0 0;
+			padding: 0;
+			list-style:none;
+			overflow:visible;
+			top: 50%;
+			width: 560px; /* !!! ADJUST when change BOX SIZE !!! */
+			z-index:10;
+		}
+		
+		ul.galleryArrows li{
+			position: absolute;
+			margin: 0;
+			padding: 0;
+		}
+		
+		ul.galleryArrows li a{
+			display: block;
+			position: relative;
+			overflow: hidden;
+			width: 27px;
+			height: 0;
+			line-height:30px;
+			padding: 27px 0 0;
+			background: url('images/galleryNav.png') 0 0 no-repeat;
+		}
+		
+		ul.galleryArrows li.next a{
+			background-position: -27px 0;
+		}
+		
+		ul.galleryArrows li.prev{
+			left: 10px;
+		}
+		
+		ul.galleryArrows li.disabled a{
+			cursor: default;
+		}
+		
+		ul.galleryArrows li.next.disabled a{
+			background-position: -27px -27px;
+		}
+		
+		ul.galleryArrows li.prev.disabled a{
+			background-position: 0 -27px;
+		}
+		
+		ul.galleryArrows li.next{
+			right: 10px;
+		}
+			
+		ul.galleryNav{
+			position:absolute;
+			bottom: 15px;
+			margin: 0;
+			padding: 0;
+			list-style:none;
+			z-index:10;
+			left: 50%;
+		}
+		
+		ul.galleryNav li{
+			display:block;
+			float:left;
+			margin: 0;
+			padding: 0;
+		}
+		
+		ul.galleryNav li a{
+			display:block;
+			position:relative;
+			overflow:hidden;			
+			height:0;
+			width:15px;
+			line-height: 20px;
+			padding: 15px 0 0;
+			background: url('images/galleryNav.png') -8px -60px no-repeat;
+		}
+		
+		ul.galleryNav li.active a{
+			background-position: -35px -60px;
+		}
+		
+		/*::::::::::::::: VERTICAL NAVIGATION STYLE (END) :::::::::::::::*/		
+
+
 </style>
 
-<!-- <script type="text/javascript" src="sd/jquery-1.3.2.min.js"></script>
-<script type="text/javascript" src="sd/slidedeck.jquery.lite.js"></script> -->
 <script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
 <script type="text/javascript" src="js/jquery-ui-1.8.11.custom.min.js"></script>
 
+
+ <!-- Include the below script, Copyright 2010, Brandon Aaron (http://brandonaaron.net/) for scrollwheel support. -->
+ <script type="text/javascript" src="sd/jquery-mousewheel/jquery.mousewheel.min.js"></script>
+		
+ <link rel="stylesheet" type="text/css" href="sd/slidedeck.skin.css" media="screen" />
+ <!-- Styles for the skin that only load for Internet Explorer -->
+ <!--[if IE]>
+     <link rel="stylesheet" type="text/css" href="sd/slidedeck.skin.ie.css" media="screen,handheld" />
+ <![endif]-->
+		
+ <!-- Include the SlideDeck jQuery script. -->
+ <script type="text/javascript" src="sd/slidedeck.jquery.lite.pack.js"></script>
+        
+ <style type="text/css">
+   #slidedeck_frame {
+      width: 560px;
+      height: 354px;
+      position: relative;
+      overflow: hidden;
+   }     
+ </style>
+
 <script>
   $(function() {
 	$( "#tabs" ).tabs({ selected: 0 });
   </div>    <!-- end Content  -->
 
 <!-- OPTION 1 --->
-  <div class="yui3-u-5-8">
-    <h1>Hot Items</h1>
+  <div id="option1a" class="yui3-u-5-8">
+    <h1>Hot Items</h1><a href="#" onclick="$('#option1a').hide();$('#option1b').hide();">hide</a>
   </div>
 
-  <div class="yui3-u-3-8" style="height: 52px; background-color: #bc9c2d; padding: 10px 10px; width: 340px; margin-bottom: 1em; height: 52px; ">
+  <div id="option1b" class="yui3-u-3-8" style="height: 52px;  padding: 10px 10px; width: 340px; margin-bottom: 1em; height: 52px; ">
 
     <ul class="ordercountdown" style="margin-top: 0;">
       <li style="border-radius: 5px 5px;      -moz-box-shadow: inset 0 1px 5px #152D47; -webkit-box-shadow: inset 0 1px 5px #152D47;  border: 1px solid #0D1C2D;  text-align: center; margin: 0 auto; width: 300px;"><span class="ordercount" style="border-radius: 4px;">25</span> Orders left for This Week</li>
 <!-- END OPTION 1 --->
 
 <!-- OPTION 2 --->
-  <div class="yui3-u-5-8">
-    <h1>Hot Items</h1>
+  <div id="option2a" class="yui3-u-5-8">
+    <h1>Hot Items</h1><a href="#" onclick="$('#option2a').hide();$('#option2b').hide();">hide</a>
   </div>
 
-  <div class="yui3-u-3-8" style="height: 52px; background-color: #bc9c2d; padding: 10px 10px; width: 340px; margin-bottom: 1em; height: 56px; ">
+  <div id="option2b" class="yui3-u-3-8" style="height: 52px; background-color: #bc9c2d; padding: 10px 10px; width: 340px; margin-bottom: 1em; height: 56px; ">
 
     <ul class="ordercountdown" style="margin: 0 auto; width: 186px;    -moz-box-shadow: inset 0 1px 10px #CCC;  -moz-border-radius: 6px 6px 0 0; ">
 	<li style="border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px;     -moz-box-shadow: inset 0 1px 5px #152D47; -webkit-box-shadow: inset 0 1px 5px #152D47;  border: 1px solid #0D1C2D;"><span class="ordercount" style="border-radius: 5px;">25</span> Orders left for This Week</li>
     <!-- more-information -->
 
       <div class="yui3-u-5-8">
-	<img width="550" height="400" src="images/corn-cowder.jpg">
+	<div id="slidedeck_frame" class="">
+	  <dl class="slidedeck">
+	    <dt>Chipotle Roasted Corn Soup</dt>
+	    <dd><img width="560" height="354" src="images/smokey-beans.jpg"></dd>
+	    <dt>Slide 2</dt>
+	    <dd><img width="560" height="354" src="images/corn-cowder.jpg"></dd>
+	    <dt>Slide 3</dt>
+	    <dd><img width="560" height="354" src="images/meatballs.jpg"></dd>
+	    <dt>Slide 4</dt>
+	    <dd><img width="560" height="354" src="images/choc-muffins.jpg"></dd>
+	  </dl>
+	</div>
       </div>
+
       <div class="yui3-u-1-3 food-info">
 	
 
       </div>
 
       <div class="yui3-u-3-8">
-	<h1>Smokey Black Bean Enchiladas</h1>
-	<img width="350" height="250" src="images/smokey-beans.jpg">
+
+	
+	<script type="text/javascript">
+		// Script for handling goto's and prev and next
+		var SlideDeckAssistant = {
+			innerSlideCount: 0,
+			/** prevSlide, nextSlide and goToSlide are all custom functions to control progress of the SlideDeck */
+			prevSlide: function(theIndex){
+				SlideDeckAssistant.goToSlide(theIndex - 1);
+			},
+			nextSlide: function(theIndex){
+				SlideDeckAssistant.goToSlide(theIndex + 1);
+			},
+			goToSlide: function(theIndex){        
+				$('ul.galleryNav li').removeClass('active');
+				$('ul.galleryNav li:eq('+ theIndex +')').addClass('active');
+				myDeck.goTo(theIndex+1);
+				if((theIndex + 1) == SlideDeckAssistant.innerSlideCount){
+					// disable the next button
+					$('ul.galleryArrows .next').addClass('disabled');
+					$('ul.galleryArrows .prev').removeClass('disabled');
+				}else if((theIndex + 1) == 1){
+					// disable the previous button
+					$('ul.galleryArrows .next').removeClass('disabled');
+					$('ul.galleryArrows .prev').addClass('disabled');
+				}else{
+					// enable both next/previous buttons
+					$('ul.galleryArrows .next, ul.galleryArrows .prev').removeClass('disabled');
+				}
+			},
+			init: function(){
+				SlideDeckAssistant.innerSlideCount = $('#slidedeck_frame dl.slidedeck dd').length;
+				/** Store number of slides in SlideDeck */
+				$('#slidedeck_frame').append('<ul class="galleryArrows"><li class="prev"><a href="#prev">&larr;<\/a><\/li><li class="next"><a href="#next">&rarr;<\/a><\/li><\/ul>');
+				// create navigation element with next and previous buttons
+				$('#slidedeck_frame').append('<ul class="galleryNav"><\/ul>');
+				// create bullet navigation element
+				for (i=0 ; i < SlideDeckAssistant.innerSlideCount ; i++ ) {
+					$('ul.galleryNav').append('<li><a href="goto#' + (i+1) + '">' + (i+1) + '<\/a><\/li>');
+				}
+				// create navigation bullets based on number of slides
+				var goToDots = $('ul.galleryNav li a');
+				$('ul.galleryNav').css({marginLeft: '-' + (goToDots.outerWidth(true)*goToDots.length / 2) + 'px'});
+				// position navigation bullets
+				$('ul.galleryNav li:first').addClass('active');
+				$('ul.galleryArrows li.prev').addClass('disabled');
+				$('ul.galleryNav li a').click(function(e){
+					e.preventDefault();
+					var theIndex = $('ul.galleryNav li a').index($(this));
+					SlideDeckAssistant.goToSlide(theIndex);
+					return false;
+				});
+				// assign click function to navigation bullets
+				$('ul.galleryArrows li.prev a').click(function(e){
+					e.preventDefault();
+					if($(this).parent('li').hasClass('disabled')){
+						return false;
+					}else{
+						var theIndex = $('ul.galleryNav li').index($('ul.galleryNav li.active'));
+						SlideDeckAssistant.prevSlide(theIndex);
+					}
+					return false;
+				});
+				// assign click function for previous button
+				$('ul.galleryArrows li.next a').click(function(e){
+					e.preventDefault();
+					if($(this).parent('li').hasClass('disabled')){
+						return false;
+					}
+					else{
+						var theIndex = $('ul.galleryNav li').index($('ul.galleryNav li.active'));
+						SlideDeckAssistant.nextSlide(theIndex);
+					}
+					return false;
+				});
+				//assign click function for next button
+		}
+		};
+		
+		$(document).ready(function(){
+			SlideDeckAssistant.init();
+		});
+			
+		/** Initiate the SlideDeck */
+		var myDeck = $('#slidedeck_frame dl.slidedeck').slidedeck({
+			hideSpines: true,
+            autoPlay: true,
+            cycle: true,
+            /**
+             * The complete function is executed after each slide animation.
+             * here we are using it to upate the navigation dots.
+             */
+            complete: function(deck){
+				$('ul.galleryNav li').removeClass('active');
+				$('ul.galleryNav li:eq('+ ( deck.current - 1 ) +')').addClass('active');
+				/** Update current slide indicator after each slide animation completes */
+            }
+		})
+			
+			
+		</script>
+
       </div>
 
       <div class="yui3-u-1-2">