Permalink
Browse files

adding twitter demo (demo2)

  • Loading branch information...
1 parent d973313 commit 4351a92d505569997cfe4e904feaf7eae478a0af @addyosmani committed Oct 8, 2010
Showing with 368 additions and 0 deletions.
  1. +191 −0 demos/demo2/index.html
  2. +177 −0 demos/demo2/js/app.js
  3. BIN images/speech3.png
View
@@ -0,0 +1,191 @@
+<!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 3</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/speech3.png");
+display:none;
+height:290px;
+left:-22px;
+margin-bottom:0;
+margin-left:35%;
+margin-right:auto;
+position:absolute;
+top:42px;
+width:254px;
+display:none;
+}
+
+#roundrr_caption {
+ font-size:21px;
+ width:154px;
+}
+
+#roundrr_caption a {
+
+color:#00CCFF;
+}
+ </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="alyankovic" src="http://a0.twimg.com/profile_images/246073324/IL2_bigger.jpg"></img>
+ </div>
+ </li>
+
+ <li class='item'>
+ <div class='my_class'>
+ <img alt="taylorswift13" src="http://a0.twimg.com/profile_images/390558464/Photo_190_bigger.jpg"></img> </div> </li>
+
+
+ <li class='item'>
+ <div class='my_class'>
+ <img alt="thedandywarhols" src="http://a1.twimg.com/profile_images/930308885/ban_bigger.jpg"></img>
+ </div>
+ </li>
+
+ <li class='item'>
+ <div class='my_class'>
+ <img alt="lennykravitz" src="http://a0.twimg.com/profile_images/1117384560/image_bigger.jpg"></img>
+ </div>
+ </li>
+
+ <li class='item'>
+ <div class='my_class'>
+ <img alt="katyperry" src="http://a3.twimg.com/profile_images/1107052519/i_mblue_bigger.jpg"></img> </div> </li>
+
+
+ <li class='item'>
+ <div class='my_class'>
+ <img alt="KESHASUXX"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="Ladygaga" src="http://a3.twimg.com/profile_images/941805227/braphoto_bigger.jpg"></img> </div> </li>
+
+ <li class='item'>
+ <div class='my_class'>
+ <img alt="chriscornell" 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="KanyeWest" 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="THISISROBTHOMAS" 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="weezerofficial" src="http://a0.twimg.com/profile_images/1106738472/Hurley250_bigger.jpg"></img> </div>
+ </li>
+
+ <li class='item'>
+ <div class='my_class'>
+ <img alt="ericprydz" src="http://a0.twimg.com/profile_images/425527348/ejebild_bigger.jpg"></img>
+ </div>
+ </li>
+
+ <li class='item'>
+ <div class='my_class'> <img alt="skinnermike" 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
@@ -0,0 +1,177 @@
+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 imageCaption = thisImage.attr('alt');
+ var speechBubble = jQuery('.roundrr_speech');
+ speechBubble.fadeIn();
+ getLatestTweet(imageCaption);
+
+ jQuery('#roundrr_caption').fadeIn();
+
+ }
+
+
+
+String.prototype.parseURL = function() {
+ return this.replace(/[A-Za-z]+:\/\/[A-Za-z0-9-_]+\.[A-Za-z0-9-_:%&\?\/.=]+/g, function(url) {
+ return url.link(url);
+ });
+};
+
+String.prototype.parseUsername = function() {
+ return this.replace(/[@]+[A-Za-z0-9-_]+/g, function(u) {
+ var username = u.replace("@","")
+ return u.link("http://twitter.com/"+username);
+ });
+};
+
+String.prototype.parseHashtag = function() {
+ return this.replace(/[#]+[A-Za-z0-9-_]+/g, function(t) {
+ var tag = t.replace("#","%23")
+ return t.link("http://search.twitter.com/search?q="+tag);
+ });
+};
+
+function getLatestTweet(strUsername)
+{
+
+
+ $.getJSON("http://twitter.com/statuses/user_timeline/" + strUsername + ".json?callback=?", function(data)
+ {
+
+
+ var returns = (data[0].text).parseURL().parseUsername().parseHashtag();
+ jQuery('#roundrr_caption').html(returns);
+ 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
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 4351a92

Please sign in to comment.