From dce29dcd9bd7729f36c84f5521d53d7c068fdee6 Mon Sep 17 00:00:00 2001
From: legacye <addyosmani@gmail.com>
Date: Sat, 9 Oct 2010 06:52:13 +0100
Subject: [PATCH] adding fixes for webkit browsers

---
 demos/demo1/index.html                |  3 +-
 demos/demo1/js/app.js                 | 46 +++++++++++++++++++++++----
 demos/demo1/lightbox/css/slimbox2.css |  5 +++
 3 files changed, 46 insertions(+), 8 deletions(-)

diff --git a/demos/demo1/index.html b/demos/demo1/index.html
index 35844eb..6338bb4 100644
--- a/demos/demo1/index.html
+++ b/demos/demo1/index.html
@@ -42,6 +42,7 @@
 
 
 
+
 	</style>
 
     <!--Include jQuery and jQuery roundrr dependancies-->
@@ -70,7 +71,7 @@
   		<a href="#" id="prev"></a>
   		<img class="keyboard" src="../../images/keyboard.png"></img>
   		<p>
-  		 You can also navigate using the left and right keys on your keyboard.
+  		 You can also navigate using the left and right keys on your keyboard. Space zooms the image using a lightbox and Esc closes.
   		 <br><br>
   		 Note in this demo that we are in 'standard' mode as opposed to 'pick' mode.
   		</p>
diff --git a/demos/demo1/js/app.js b/demos/demo1/js/app.js
index 85012c0..3124ae1 100644
--- a/demos/demo1/js/app.js
+++ b/demos/demo1/js/app.js
@@ -3,7 +3,10 @@ jQuery(document).ready(function()
 	  
          var currentImage = "";
          var interfaceLock = false; 
-         
+         var imageCaption = "";
+		 var imageSrc = "";
+		 var largerImage = "";
+		 var speechBubble = "";
       
 
 	  	jQuery("#roundrr_container").roundrrwheel(
@@ -91,15 +94,19 @@ jQuery(document).ready(function()
 		$('#next').bind('click', spinMenuRight);
 		$('#prev').bind('click', spinMenuLeft);
 		
+
+		
+		
 		function showLargeImage($i, mode)
 		{
 		  
 			interfaceLock = true;
 			var thisImage   = $i.find('img');
-			var imageSrc = thisImage.attr('src');
-            var largerImage = imageSrc.replace('_bigger', '');	
-            var imageCaption = thisImage.attr('alt');
-            var speechBubble =  jQuery('.roundrr_speech');
+			
+			imageSrc = thisImage.attr('src');
+            largerImage = imageSrc.replace('_bigger', '');	
+            imageCaption = thisImage.attr('alt');
+            speechBubble =  jQuery('.roundrr_speech');
             
             
             var captionObject = jQuery('#roundrr_caption');
@@ -113,14 +120,25 @@ jQuery(document).ready(function()
 			captionObject.html(imageCaption);
 			
 			
-			/*utilize the slimbox API for lightbox triggering*/
+			/*center area: utilize the slimbox API for lightbox triggering*/
 			centerObject.bind('click', function()
 			{
 			
-			  jQuery.slimbox(largerImage, imageCaption, { overlayOpacity:0.6});
+			  showLightbox();
 			  
 			});
 			
+			
+			/*hover case for central image*/
+			centeredImage.hover( function()
+			{
+			 $(this).css('opacity','0.5');
+			
+			}, function()
+			{
+			$(this).css('opacity','1');
+			});
+			
             
             if(mode=='noanim')
             {
@@ -136,6 +154,12 @@ jQuery(document).ready(function()
 		}
 		
 		
+		  /*Show lightbox for current image*/
+		  function showLightbox()
+		  {
+		  jQuery.slimbox(largerImage, imageCaption, { overlayOpacity:0});
+		  }
+		
 		   /*Spin the menu to the left*/
 			function spinMenuLeft()
 			{
@@ -158,6 +182,7 @@ jQuery(document).ready(function()
 			$(window).keydown(function(event) 
 			{
 				var keycode = event.keyCode;
+				
 				switch(keycode)
 				{
 				  case 39:
@@ -166,6 +191,13 @@ jQuery(document).ready(function()
   				  case 37:
            		  spinMenuRight();
   				   break;
+  				   case 32:
+  				   if(largerImage.length)
+  				   {
+  				   showLightbox();
+  				   }
+  				   break;
+  				  
 		     } });
 
 
diff --git a/demos/demo1/lightbox/css/slimbox2.css b/demos/demo1/lightbox/css/slimbox2.css
index f9c5d44..9a9e6ac 100644
--- a/demos/demo1/lightbox/css/slimbox2.css
+++ b/demos/demo1/lightbox/css/slimbox2.css
@@ -19,8 +19,13 @@
 	background-color: #fff;
 	margin-top:-200px;
 	margin-left:-50px;
+	
+	-webkit-margin-top:-560px;
+	-webkit-margin-left:-300px;
 }
 
+
+
 .lbLoading {
 	background: #fff url(loading.gif) no-repeat center;
 }