Rondell - Display images and other content in a nice way

This demo fetches links & images from my brothers great webservice wookmark.com and creates a rondell from the data.

The image titles are used as caption and clicking the focused element will open the wookmark in a new tab or window.

Here's how it's done

<div id="rondellGallery" style="height:400px;"> </div>

<script type="text/javascript">
  $(function() {
    $.ajax({
      url: "http://www.wookmark.com/api/json",
      dataType: "jsonp",
      success: function(data, text, xhqr) {
        var item, rondellContent = "", i;
        if (text === "success") {
          for (i = 0; i < 24; i++) {
            item = data[i];
            rondellContent += ' \\
              <a href="'+item.url+'" title="'+item.title+'" \\
                target="_blank" style="display:none"> \\
                <img src="'+item.preview+'" title="'+item.title+'" width="'+item.width+'" height="'+item.height+'"/> \\
              </a> \\
            ';
          }
          $("#rondellGallery").html(rondellContent).children().rondell({
            preset: "gallery"
          });
        }
      }
    });
  });
</script>