Rondell - Display images and other content in a nice way

This demo shows how to display a carousel enhanced with a lightbox. Click an image to focus it and a second click will open the original image in the lightbox.

You can press arrow left and right on your keyboard to navigate through the images or swipe when using a touch device. The rondell will automatically continue to rotate through the carousel when your mouse leaves it's area.

Here's how it's done

<div id="rondellCarousel">
  <a target="_blank" rel="rondell" href="images/galery/band.jpg" title="...">
    <img src="images/galery/band.jpg" alt="Band" title="My favourite band">
    <h5>Awesome concert</h5>
    <p>My favourite band.</p>
  </a>
  
  ...
  
</div>

<script type="text/javascript">
  $(function() {
    // Create a rondell with the 'carousel' preset and set an option
    // to disable the rondell while the lightbox is displayed
    $("#rondellCarousel > *").rondell({
      preset: "carousel",
    });
  });
</script>

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

This example shows a carousel with a cubic function for the animation. The images 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="rondellCubic"> </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> \\
            ';
          }
          $("#rondellCubic").html(rondellContent).children().rondell({
            preset: "cubic"
          });
        }
      }
    });
  });
</script>