Putting together jQuery, Twitter API and Fancybox

Which jQuery Lightbox Plugin to choose? There are plenty and probably some more you don't know about.

I don't really remember for how long I use Fancybox, but since the switch it has been my favorite tool in all 'lightbox' questions.

Let's put that together with the Twitter API to make the demo a little bit more dynamically.

The Script

var userInfo = [
      { name: 'Following',        key: 'friends_count'   },
      { name: 'Followers',        key: 'followers_count' },
      { name: 'Statuses',         key: 'statuses_count'  },
      { name: 'URL',              key: 'url'             } 
    ],
    searchTerm = 'jquery',
    searchUrl  = 'http://search.twitter.com/search.json?q=' + searchTerm + '+filter:links&rpp=5',
    statusText = 'Click on the User Link or Picture for more information',
    tweetLi    = function(user, image, text) {
      return '<span><a href="http://twitter.com/' + user + '">' + user + '</a></span>' +
             '<img src="' + image + '" width="48" height="48" />' +
             '<p>' + urlize(text) + '</p>';
    },
    waitDiv    = function(user) {
      return '<div class="fb-wait">Querying the Twitter API for @' + user + '...</div>';
    },
    userUrl    = function(user) {
      return 'http://twitter.com/users/' + user + '.json';
    },
    infoWrap   = function(json) {
      var infos = ''
      
      for(i = 0; i < userInfo.length; i++) {
        var info = json[userInfo[i].key];
        
        if(info) {
          infos += '<li>' + 
                     urlize('<span>' + userInfo[i].name + '</span>' + info); +
                   '</li>'
        }
      }

      return '<div class="fb-info">' +
                '<h1><a href="http://twitter.com/' + json.screen_name + '">@' + json.screen_name + '</a></h1>' +
                '<img src="' + json.profile_image_url + '" width="128" height="128" />' +
                '<ul>' + infos + '</ul>' +
             '</div>'
    },
    urlize     = function(text) { //http://stackoverflow.com/questions/37684/replace-url-with-html-links-javascript
      var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
      return text.replace(exp, '<a href="$1">$1</a>');
    };
    
    
function displayUserInformation(user) {
  $.fancybox(waitDiv(user));
  
  $.getJSON(userUrl(user) + '?callback=?', function(json) {
    $.fancybox(infoWrap(json), {
      scrolling: false
    });
  });
}

$(document).ready(function() {
  var demo   = $('#demo'),
      tweets = $('<ul/>').appendTo(demo);
  
  $.getJSON(searchUrl + '&callback=?', function(json) {
    var results = json.results;
    
    $('.status', demo).text(statusText);
    
    for(i = 0; i < results.length; i++) {
      var t = results[i];
      
      $('<li/>', {
        html: tweetLi(t.from_user, t.profile_image_url, t.text)
      }).appendTo(tweets);
    }
    
    $('li img, li span a', tweets).click(function() {
      var userLi = $(this).parent();
          userLi = userLi.is('li') ? userLi : userLi.parent(); //coming from <a>
      
      displayUserInformation(userLi.find('span a').text());
      return false;
    });
  });
});

The HTML

<div id="demo">
  <div class="status">Finding Tweets containing 'jQuery' and Links...</div>
</div>

The Styling

#demo ul li { padding: 10px; position: relative; min-height: 58px; margin: 10px; }
#demo ul li img { position: absolute; top: 10px; left: 10px; border: 1px solid #999; box-shadow: 0 0 2px #aaa; -moz-box-shadow: 0 0 2px #aaa; -webkit-box-shadow: 0 0 2px #aaa; cursor: pointer; }
#demo ul li span { position: absolute; top: 10px; left: 80px; }
#demo ul li span a { font-size: 1.4em; font-weight: bold; color: #111; text-shadow: 1px 1px 0 white; text-decoration: none; }
#demo ul li p { position: absolute; top: 30px; left: 80px; font-size: 1.1em; line-height: 1.4em; color: #333; }
#demo ul li p a { color: black; }
#demo .status { text-align: center; font-size: 1.3em; padding-bottom: 10px; color: #444; }
.fb-wait { font-size: 1.8em; padding: 20px; width: 500px; text-align: center; }
.fb-info { padding: 20px; position: relative; min-height: 138px; }
.fb-info img { position: absolute; top: 20px; left: 20px; }
.fb-info h1 { position: absolute; top: 20px; left: 168px; font-size: 2em; }
.fb-info h1 a { color: black; }
.fb-info ul { margin: 30px 0 0 158px; }
.fb-info ul li { font-size: 1.3em; padding-bottom: 12px; }
.fb-info ul li span { font-weight: bold; padding-right: 8px; }
Q