Permalink
Browse files

adding app.js update

  • Loading branch information...
1 parent 82c4064 commit 18643886c5e4326c6be2ecd21946cba2544f4ec9 @addyosmani committed Oct 7, 2010
Showing with 160 additions and 160 deletions.
  1. +13 −160 index.html
  2. +147 −0 scripts/ui/app.js
View
@@ -4,172 +4,25 @@
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>AddyOsmani.com - Roundrr Demo</title>
+ <!--First stylesheet configures Roundrr presentation, second is font-face-->
<link rel="stylesheet" type="text/css" href="css/style.css"></link>
<link rel="stylesheet" type="text/css" href="fonts/stylesheet.css"></link>
+ <!--Include jQuery and jQuery roundrr dependancies-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type='text/javascript' src='scripts/ui/jQuery.roundrr.js'></script>
-
-
- <script type="text/javascript">
-
-
-jQuery(document).ready(function()
-{
-
- var currentImage = "";
- var interfaceLock = false;
-
- jQuery("#roundrr_container").roundrrwheel(
- {
-
- centerClass: 'roundrr_center',
- listClass: 'list',
- itemClass: 'item',
- radius: 220,
- animSpeed:400,
- centerX: 29,
- centerY: 60,
- animationEffect: 1, //(1:off, 5:light,10:heavy, 15:subtle)
- selectEvent: "click",
- //on selecting/clicking an item on the wheel
- onSelect: function($selected)
- {
- showLargeImage($selected, 'noanim');
- },
- //on beginning to spin/animate the wheel
- onNextBegin: function($m)
- {
-
- interfaceLock = true;
-
- },
- onPrevBegin: function($m)
- {
-
- interfaceLock = true;
-
- },
- //once an image has moved under the 'pick'
- onImageFocus: function($item)
- {
-
- showLargeImage($item, 'none');
-
-
- },
- //once an image/image set is no longer under the 'pick'
- onImageBlur: function($item)
- {
-
- },
- //once the animation has completed
- onAnimationComplete: function($menu)
- {
-
- jQuery('.centerImage').attr('src', currentImage);
- jQuery('.centerImage').load(function()
- {
-
- interfaceLock = false;
- });
-
-
- },
- angleOffset: Math.PI,
- onShow: function($menuitems)
- {
- $menuitems.each(function(i)
- {
- var $this = jQuery(this);
- $this.delay(i*100).fadeIn(500);
- });
-
-
- }
-
- });
-
- jQuery("#roundrr_container").roundrrwheel("show");
- $('#next').bind('click', spinMenuLeft);
- $('#prev').bind('click', spinMenuRight);
-
- function showLargeImage($i, mode)
- {
-
- interfaceLock = true;
- var thisImage = $i.find('img');
- var focusedImage = thisImage.attr('src');
- var largerImage = focusedImage.replace('_bigger', '');
- var imageCaption = thisImage.attr('alt');
- var speechBubble = jQuery('.roundrr_speech');
- speechBubble.fadeIn();
-
- currentImage = largerImage;
-
- jQuery('#roundrr_caption').fadeIn();
- jQuery('#roundrr_caption').html(imageCaption);
-
- if(mode=='noanim')
- {
-
- jQuery('.centerImage').attr('src', currentImage);
- jQuery('.centerImage').load(function()
- {
- interfaceLock = false;
-
- });
- }
-
- }
-
-
- /*Spin the menu to the left*/
- function spinMenuLeft()
- {
- if(!(interfaceLock))
- {
- jQuery("#roundrr_container").roundrrwheel("prev");
- }
- }
-
- /*Spin the menu to the right*/
- function spinMenuRight()
- {
- if(!(interfaceLock))
- {
- jQuery("#roundrr_container").roundrrwheel("next");
- }
- }
-
- /*Keydown events*/
- $(window).keydown(function(event)
- {
- var keycode = event.keyCode;
- switch(keycode)
- {
- case 39:
- spinMenuLeft();
- break;
- case 37:
- spinMenuRight();
- break;
- } });
-
-
-
- //setInterval(spinMenuLeft, 5000);
-
- });
- </script>
+
+ <!-- Include Demo app code -->
+ <script type='text/javascript' src='scripts/ui/app.js'></script>
+
+
</head>
<body>
-
-
<div class="container">
+ <!-- Right-hand navigation -->
<div id="roundrr_navigation">
<a href="#" id="next"></a>
<a href="#" id="prev"></a>
@@ -180,25 +33,25 @@
</div>
-
+ <!-- central image -->
<div class="roundrr_center">
-
</div>
-
+ <!-- Speech bubble for captions -->
<div class="roundrr_speech">
-
</div>
-
+ <!-- actual caption text -->
<div id="roundrr_caption">
</div>
+ <!-- the pick which is displayed over the current image -->
<div id="roundrr_pick">
</div>
+ <!-- the container of images -->
<div id='roundrr_container'>
<ul class='list'>
View
@@ -0,0 +1,147 @@
+jQuery(document).ready(function()
+{
+
+ var currentImage = "";
+ var interfaceLock = false;
+
+ jQuery("#roundrr_container").roundrrwheel(
+ {
+
+ centerClass: 'roundrr_center',
+ listClass: 'list',
+ itemClass: 'item',
+ radius: 220,
+ animSpeed:400,
+ centerX: 29,
+ centerY: 60,
+ animationEffect: 1, //(1:off, 5:light,10:heavy, 15:subtle)
+ selectEvent: "click",
+ //on selecting/clicking an item on the wheel
+ onSelect: function($selected)
+ {
+ showLargeImage($selected, 'noanim');
+ },
+ //on beginning to spin/animate the wheel
+ onNextBegin: function($m)
+ {
+
+ interfaceLock = true;
+
+ },
+ onPrevBegin: function($m)
+ {
+
+ interfaceLock = true;
+
+ },
+ //once an image has moved under the 'pick'
+ onImageFocus: function($item)
+ {
+
+ showLargeImage($item, 'none');
+
+
+ },
+ //once an image/image set is no longer under the 'pick'
+ onImageBlur: function($item)
+ {
+
+ },
+ //once the animation has completed
+ onAnimationComplete: function($menu)
+ {
+
+ jQuery('.centerImage').attr('src', currentImage);
+ jQuery('.centerImage').load(function()
+ {
+
+ interfaceLock = false;
+ });
+
+
+ },
+ angleOffset: Math.PI,
+ onShow: function($menuitems)
+ {
+ $menuitems.each(function(i)
+ {
+ var $this = jQuery(this);
+ $this.delay(i*100).fadeIn(500);
+ });
+
+
+ }
+
+ });
+
+ jQuery("#roundrr_container").roundrrwheel("show");
+ $('#next').bind('click', spinMenuLeft);
+ $('#prev').bind('click', spinMenuRight);
+
+ function showLargeImage($i, mode)
+ {
+
+ interfaceLock = true;
+ var thisImage = $i.find('img');
+ var focusedImage = thisImage.attr('src');
+ var largerImage = focusedImage.replace('_bigger', '');
+ var imageCaption = thisImage.attr('alt');
+ var speechBubble = jQuery('.roundrr_speech');
+ speechBubble.fadeIn();
+
+ currentImage = largerImage;
+
+ jQuery('#roundrr_caption').fadeIn();
+ jQuery('#roundrr_caption').html(imageCaption);
+
+ if(mode=='noanim')
+ {
+
+ jQuery('.centerImage').attr('src', currentImage);
+ jQuery('.centerImage').load(function()
+ {
+ interfaceLock = false;
+
+ });
+ }
+
+ }
+
+
+ /*Spin the menu to the left*/
+ function spinMenuLeft()
+ {
+ if(!(interfaceLock))
+ {
+ jQuery("#roundrr_container").roundrrwheel("prev");
+ }
+ }
+
+ /*Spin the menu to the right*/
+ function spinMenuRight()
+ {
+ if(!(interfaceLock))
+ {
+ jQuery("#roundrr_container").roundrrwheel("next");
+ }
+ }
+
+ /*Keydown events*/
+ $(window).keydown(function(event)
+ {
+ var keycode = event.keyCode;
+ switch(keycode)
+ {
+ case 39:
+ spinMenuLeft();
+ break;
+ case 37:
+ spinMenuRight();
+ break;
+ } });
+
+
+
+ //setInterval(spinMenuLeft, 5000);
+
+ });

0 comments on commit 1864388

Please sign in to comment.