Permalink
Browse files

adding fixes for webkit browsers

  • Loading branch information...
1 parent 4a5a865 commit dce29dcd9bd7729f36c84f5521d53d7c068fdee6 @addyosmani committed Oct 9, 2010
Showing with 46 additions and 8 deletions.
  1. +2 −1 demos/demo1/index.html
  2. +39 −7 demos/demo1/js/app.js
  3. +5 −0 demos/demo1/lightbox/css/slimbox2.css
View
@@ -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>
View
@@ -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;
+
} });
@@ -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;
}

0 comments on commit dce29dc

Please sign in to comment.