Skip to content

Commit

Permalink
adding modes, new demo
Browse files Browse the repository at this point in the history
  • Loading branch information
@addyosmani
addyosmani committed Oct 8, 2010
1 parent c31758e commit d973313
Show file tree
Hide file tree
Showing 7 changed files with 373 additions and 9 deletions.
10 changes: 10 additions & 0 deletions css/style.css
View file
Expand Up @@ -152,4 +152,14 @@ font-family: 'TradeGothicLTStdBoldCondensed', sans-serif;
-moz-border-radius: 10px; -moz-border-radius: 10px;
-webkit-border-radius: 10px; -webkit-border-radius: 10px;
cursor: pointer; cursor: pointer;
}


.selected{

background-color:red;
border:2px solid red;
color:#AABBCC;
font-size:1.5em;

} }
185 changes: 185 additions & 0 deletions demos/demo1/index.html
View file
@@ -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>

151 changes: 151 additions & 0 deletions demos/demo1/js/app.js
View file
@@ -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;
} });


});
Binary file added images/speech2.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions index.html
View file
Expand Up @@ -46,10 +46,10 @@
<div id="roundrr_caption"> <div id="roundrr_caption">
</div> </div>


<!-- the pick which is displayed over the current image --> <!-- the pick which is displayed over the current image -->
<div id="roundrr_pick"> <div id="roundrr_pick">
</div> </div>



<!-- the container of images --> <!-- the container of images -->
<div id='roundrr_container'> <div id='roundrr_container'>
Expand Down
7 changes: 6 additions & 1 deletion scripts/ui/app.js
View file
Expand Up @@ -2,10 +2,11 @@ jQuery(document).ready(function()
{ {


var currentImage = ""; var currentImage = "";
var interfaceLock = false; var interfaceLock = false;


jQuery("#roundrr_container").roundrrwheel( jQuery("#roundrr_container").roundrrwheel(
{ {
mode: 'pick', //mode can be pick or standard
autoplay: false, autoplay: false,
autoplayDirection: 'anticlockwise', autoplayDirection: 'anticlockwise',
autoplayDuration: 4000, autoplayDuration: 4000,
Expand Down Expand Up @@ -77,6 +78,10 @@ jQuery(document).ready(function()


}); });






jQuery("#roundrr_container").roundrrwheel("show"); jQuery("#roundrr_container").roundrrwheel("show");
$('#next').bind('click', spinMenuRight); $('#next').bind('click', spinMenuRight);
$('#prev').bind('click', spinMenuLeft); $('#prev').bind('click', spinMenuLeft);
Expand Down

0 comments on commit d973313

Please sign in to comment.