Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

adding modes, new demo

  • Loading branch information...
commit d973313da48b54b36789fe4e85a17842584cab0e 1 parent c31758e
@addyosmani authored
View
10 css/style.css
@@ -152,4 +152,14 @@ font-family: 'TradeGothicLTStdBoldCondensed', sans-serif;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
cursor: pointer;
+}
+
+
+.selected{
+
+background-color:red;
+border:2px solid red;
+color:#AABBCC;
+font-size:1.5em;
+
}
View
185 demos/demo1/index.html
@@ -0,0 +1,185 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+ <title>AddyOsmani.com - Roundrr Demo 2</title>
+
+ <!--First stylesheet configures Roundrr presentation, second is font-face-->
+ <link rel="stylesheet" type="text/css" href="../../css/style.css"></link>
+
+
+ <!--overrides for this demo-->
+ <style type="text/css">
+ .roundrr_speech {
+background-color:transparent;
+background-image:url("../../images/speech2.png");
+display:none;
+height:48px;
+left:-22px;
+margin-bottom:0;
+margin-left:35%;
+margin-right:auto;
+position:absolute;
+top:42px;
+width:254px;
+display:none;
+}
+
+#roundrr_caption {
+ font-size:24px;
+}
+ </style>
+
+ <!--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>
+
+ <!-- Include Demo app code -->
+ <script type='text/javascript' src='js/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>
+ <img class="keyboard" src="../../images/keyboard.png"></img>
+ <p>
+ You can also navigate using the left and right keys on your keyboard.
+ <br><br>
+ Note in this demo that we are in 'standard' mode as opposed to 'pick' mode.
+ </p>
+ </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 container of images -->
+ <div id='roundrr_container'>
+ <ul class='list'>
+
+ <li class='item'>
+ <div class='my_class'>
+ <img alt="Al Yankovic" src="http://a0.twimg.com/profile_images/246073324/IL2_bigger.jpg"></img>
+ </div>
+ </li>
+
+ <li class='item'>
+ <div class='my_class'>
+ <img alt="Taylor Swift" src="http://a0.twimg.com/profile_images/390558464/Photo_190_bigger.jpg"></img> </div> </li>
+
+
+ <li class='item'>
+ <div class='my_class'>
+ <img alt="Dandy Warhols" src="http://a1.twimg.com/profile_images/930308885/ban_bigger.jpg"></img>
+ </div>
+ </li>
+
+ <li class='item'>
+ <div class='my_class'>
+ <img alt="Lenny Kravitz" src="http://a0.twimg.com/profile_images/1117384560/image_bigger.jpg"></img>
+ </div>
+ </li>
+
+ <li class='item'>
+ <div class='my_class'>
+ <img alt="Katy Perry" src="http://a3.twimg.com/profile_images/1107052519/i_mblue_bigger.jpg"></img> </div> </li>
+
+
+ <li class='item'>
+ <div class='my_class'>
+ <img alt="Ke$ha"src="http://a3.twimg.com/profile_images/676841123/kesha-grammy-2010_bigger.jpg"></img>
+ </div>
+ </li>
+
+
+ <li class='item'>
+ <div class='my_class'>
+ <img alt="Eminem" src="http://a0.twimg.com/profile_images/859433636/recoveryapprovedcrop_bigger.jpg"></img> </div>
+ </li>
+
+ <li class='item'>
+ <div class='my_class'>
+ <img alt="Lady Gaga" src="http://a3.twimg.com/profile_images/941805227/braphoto_bigger.jpg"></img> </div> </li>
+
+ <li class='item'>
+ <div class='my_class'>
+ <img alt="Chris Cornell" src="http://a1.twimg.com/profile_images/107748009/chris-cornell-scream_bigger.jpg"></img> </div>
+ </li>
+
+ <li class='item'>
+ <div class='my_class'>
+ <img alt="Kanye West" src="http://a2.twimg.com/profile_images/1132696610/securedownload_bigger.jpeg"></img> </div> </li>
+
+
+ <li class='item'>
+ <div class='my_class'>
+ <img alt="Stereophonics" src="http://a1.twimg.com/profile_images/402742469/myspacepic_bigger.jpg"></img> </div> </li>
+
+ <li class='item'>
+ <div class='my_class'>
+ <img alt="Rob Thomas" src="http://a2.twimg.com/profile_images/1008825866/RT600_53_bigger.jpg"></img> </div> </li>
+
+ <li class='item'>
+ <div class='my_class'>
+ <img alt="Pink" src="http://a3.twimg.com/profile_images/549375583/Pinkdeborahanderson_112_bigger.jpg"></img> </div> </li>
+
+ <li class='item'>
+ <div class='my_class'> <img alt="Weezer" src="http://a0.twimg.com/profile_images/1106738472/Hurley250_bigger.jpg"></img> </div>
+ </li>
+
+ <li class='item'>
+ <div class='my_class'>
+ <img alt="Eric Prydzz" src="http://a0.twimg.com/profile_images/425527348/ejebild_bigger.jpg"></img>
+ </div>
+ </li>
+
+ <li class='item'>
+ <div class='my_class'> <img alt="The Streets" src="http://a3.twimg.com/profile_images/121412115/Mike_Skinner-Big_Issue-00051_bigger.jpg"></img>
+ </div> </li>
+
+ <li class='item'>
+ <div class='my_class'> <img alt="Rihanna" src="http://a2.twimg.com/profile_images/1114161974/IMG00199-20100827-1452_bigger.jpg"></img>
+ </div> </li>
+
+
+
+
+
+
+
+
+ </ul>
+ </div>
+
+
+
+
+
+ </div>
+
+
+
+
+ </body>
+
+</html>
+
View
151 demos/demo1/js/app.js
@@ -0,0 +1,151 @@
+jQuery(document).ready(function()
+{
+
+ var currentImage = "";
+ var interfaceLock = false;
+
+ jQuery("#roundrr_container").roundrrwheel(
+ {
+ mode: 'standard', //mode can be pick or standard
+ autoplay: false,
+ autoplayDirection: 'anticlockwise',
+ autoplayDuration: 4000,
+ 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",
+ centerImageSrc: "../../images/placeholder2.png",
+ //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', spinMenuRight);
+ $('#prev').bind('click', spinMenuLeft);
+
+ 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;
+ } });
+
+
+ });
View
BIN  images/speech2.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
4 index.html
@@ -46,10 +46,10 @@
<div id="roundrr_caption">
</div>
- <!-- the pick which is displayed over the current image -->
+ <!-- the pick which is displayed over the current image -->
<div id="roundrr_pick">
</div>
-
+
<!-- the container of images -->
<div id='roundrr_container'>
View
7 scripts/ui/app.js
@@ -2,10 +2,11 @@ jQuery(document).ready(function()
{
var currentImage = "";
- var interfaceLock = false;
+ var interfaceLock = false;
jQuery("#roundrr_container").roundrrwheel(
{
+ mode: 'pick', //mode can be pick or standard
autoplay: false,
autoplayDirection: 'anticlockwise',
autoplayDuration: 4000,
@@ -77,6 +78,10 @@ jQuery(document).ready(function()
});
+
+
+
+
jQuery("#roundrr_container").roundrrwheel("show");
$('#next').bind('click', spinMenuRight);
$('#prev').bind('click', spinMenuLeft);
View
25 scripts/ui/jQuery.roundrr.js
@@ -15,6 +15,7 @@
// private :: defaults
var defaults = {
+ mode: 'standard',
autoplay: false,
autoplayDirection: 'clockwise',
autoplayDuration: 5000,
@@ -396,15 +397,27 @@
var thisLeft = Math.floor($this.css('left').replace('px',''));
var thisTop = Math.floor($this.css('top').replace('px',''));
+ if($m.opts.mode == 'standard')
+ {
+ if(i==0)
+ {
+
+ $m.opts.onImageFocus($this);
+ $this.find('img').addClass('selected');
+
+ }else{
+ $this.find('img').removeClass('selected');
+ }
+ }
+
// establish the new coordinates with a customizable offset; len*(Math.PI+(Math.sqrt(5)))
var coords = getCoords(i+posOffset, len, $m.opts);
- //TODO:
- //$m.opts.onImageFocus($this); add a mode for switching between pick mode
- //and wheel mode. wheel mode hides the pick.
-
+ if($m.opts.mode == 'pick')
+ {
+
//attempt to override custom case positions by extracting them from the
//array
@@ -421,8 +434,6 @@
}
-
-
//effectively check the the switch of image position for n+1, n-1
//for the current element and handle accordingly.
switch(direction)
@@ -452,6 +463,8 @@
break;
}
+
+ }
Please sign in to comment.
Something went wrong with that request. Please try again.