Version 1.1.0 - Created by Sebastian Helzle
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.image+'" title="'+item.title+' @ '+item.url+'" \\ target="_blank" style="display:none"> \\ <img src="'+item.preview+'" title="'+item.title+'" width="'+item.width+'" height="'+item.height+'"/> \\ </a> \\ '; } $("#rondellCubic").html(rondellContent).rondell({ preset: "cubic" }); } } }); }); </script>