adding fixes for webkit browsers

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>

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

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