Rondell - Display images and other content in a nice way

This example fetches links and images from my brothers great webservice wookmark.com and creates a thumbnail gallery from the data. The gallery still uses the same plugin as the other demos but uses the absolute item index to minimize movement and distraction when focusing items.

The scrollbar allows fast movement through the whole gallery and the user sees his progress when going through the images. You can use the option switchIndices to disable direct item switching if you want to keep the items order.

Here's how it's done for a simple gallery with some predefined images

<div id="rondellThumbnails">
  <img src="images/slider/pic1.png" alt="unicorn" title="A beautiful unicorn">
  
  ...
  
</div>

<script type="text/javascript">
  $(function() {
    $("#rondellThumbnails > *").rondell({
      preset: "thumbGallery"
    });
  });
</script>

Here's how you use images loaded from an api

<div id="rondellThumbnails" style="height:430px;"> </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> \\
            ';
          }
          $("#rondellThumbnails").html(rondellContent).children().rondell({
            preset: "thumbGallery"
          });
        }
      }
    });
  });
</script>