Hey guys. Quite often with image galleries powered by jQuery, we’re presented with a very similar layout – one which contains the images or items presented inside a rectangle. This is great for providing an experience users are used to, but there are a few interesting alternatives that you may like to hear about – how about displaying your images or items around a shape like a circle or an ellipse instead?. In today’s post I’ll be showing you how to do just that with a brand new plugin I’ve written called jQuery Roundrr.

I’ll also show you how you can leverage the power of math with JavaScript to generate coordinates for positioning your images in interesting ways without needing to use HTML5 or CSS3 – just pure javascript. The benefit of this approach is that much of what I show you today will work cross-browser right out of the box.

Before we get started, here are some demos of Roundrr in action. Remember you can also use the left and right keys on your keyboard to control the interface.

 

 

 

 

Introduction

Today’s post is broken up into two parts. In part 1, I’m going to introduce you to some of the concepts involved in getting the coordinates we need to plot our image galleries around a shape and in part 2 I’ll introduce you to jQuery Roundrr plugin I wrote that will allow you to easily create interactive event-based galleries using jQuery and a little CSS.

Part 1 – Getting started with Shape-based coordinates

Understanding Coordinate-Based Positioning

In most programming languages that work with a visual window or canvas, you’re provided with a means for positioning content using the concept of X and Y coordinates. These allow you to tell the presentation layer or interpreter (in the case of the browser, CSS) where it is on the screen that you would like your content to be displayed.

Example 1. When you create a div container, center it and then fill it with a list of images without specific positions, what you’re allowing the browser to do is calculate these positions for you.

Example 2. If you tell the browser that each image in your list should be specifically positioned (using margin-left and margin-top) you’re taking control of exactly where you would like the content to be positioned. We’re going to leverage these two CSS attributes for today’s project.

How To Position Items Around A Cirlcle

A lot of the math that goes into basic shape-based positioning is relatively straight-forward. Chances are you probably already covered it in highschool, so much of this will seem familiar. Consider that a circle has a center (j,k) and a radius r. The x and y positions for any point that occurs on the circle’s path is then

x(t) = r cos (t) + j, y(t)  = r sin(t) + k. A more generic way of writing this which can be used for our first attempt at coordinate-based positioning is:

  1. x = centerX + Math.cos(radians) * radius;  
  2. y = centerY + Math.sin(radians) * radius;  

where radians =  (angle_of_the_circle/180) * Math.PI. centerX is the X center of the circle on our page and centerY is the Y center of the circle.

 

In a moment I’m going to show you how to get through this math in JavaScript and output the positions you need to display content around a circle.If we were to implement the above equations using jQuery (with vanilla JavaScript intact for the equations) this would look like:

 

view plaincopy to clipboardprint?
  1. /* 
  2.    drawCircle() 
  3.    selector : a jQuery selector defining an element or array of elements 
  4.    center : the center of the circle 
  5.    radius : the radius of the circle 
  6.    angle: the angle of the circle 
  7.    x: the left offset of all points on the circle 
  8.    y: the top offset of all points on the circle 
  9.  
  10.    Sample usage: 
  11.    CSS: .box { background-color:red; height:90px; width:90px;  position:absolute; margin:5px;} 
  12.    JS:drawCircle('.box', 50, 200, 90, 310, 220); 
  13.  
  14. */  
  15.     function drawCircle(selector, center, radius, angle, x, y)  
  16.     {  
  17.   
  18.     var total = $(selector).length;  
  19.     var alpha = Math.PI * 2 / total;  
  20.   
  21.     $(selector).each(function(index)  
  22.     {  
  23.         var theta = alpha * index;  
  24.         var pointx  =  Math.floor(Math.cos( theta ) * radius);  
  25.         var pointy  = Math.floor(Math.sin( theta ) * radius );  
  26.   
  27.         // here is where we're outputting the necessary  
  28. //X and Y coordinates  
  29.         $(this).css('margin-left', pointx + x + 'px'); 
  30.         $(this).css('margin-top', pointy  + y  + 'px');  
  31.     });  
  32.   
  33.    }  

 

Understanding The Equation Of An Ellipse

Now that we’ve covered circles lets move onto a slightly more advanced shape – the ellipse. Ellipses are two dimension-closed curves and one of the many in-the-wild examples of a common ellipse is the oval. The parametric form of an ellipse rotated by an angle k is:

  1. x = p + a * cos(t) * cos(k) – b * sin(t) * sin(k)  
  2. y = q + b * sin(t) * cos(k) + a * cos(t) * sin(k)  

Where a and b are two lengths which describe the curve and p and q define the center/offset of the ellipse relative to the page. Here is my version of the JavaScript code that draws the content of a selector around an Ellipse.

 

view plaincopy to clipboardprint?
  1. /* 
  2.    drawEllipse() 
  3.    selector : a jQuery selector defining an element or array of elements 
  4.    x: the left offset of all points on the ellipse 
  5.    y: the top offset of all points on the ellipse 
  6.    a: the height of the ellipse 
  7.    b: the width of the ellipse 
  8.    angle: the angle of the ellipse 
  9.  
  10.    Sample usage: 
  11.    CSS: .box { background-color:red; height:60px; width:60px;  position:absolute; margin:5px;} 
  12.    JS:drawEllipse(".box", 230,300, 200, 350, 360); 
  13.  
  14. */  
  15.   
  16. function drawEllipse(selector, x, y, a, b, angle)  
  17. {  
  18.         var steps = $(selector).length;  
  19.   
  20.         var i = 0;  
  21.         var beta = -angle * (Math.PI / 180);  
  22.         var sinbeta = Math.sin(beta);  
  23.         var cosbeta = Math.cos(beta);  
  24.   
  25.         $(selector).each(function(index)  
  26.         {  
  27.         i+= (360/steps);  
  28.         var alpha = i * (Math.PI / 180) ;  
  29.         var sinalpha = Math.sin(alpha);  
  30.         var cosalpha = Math.cos(alpha);  
  31.         var X = x + (a * cosalpha * cosbeta - b * sinalpha * sinbeta);  
  32.         var Y = y + (a * cosalpha * sinbeta + b * sinalpha * cosbeta);  
  33.   
  34.         X = Math.floor(X);  
  35.         Y = Math.floor(Y);  
  36.   
  37. //again, here's where the important X and Y coordinates  
  38. //are being output  
  39.         $(this).css('margin-top', X + 'px'); 
  40.         $(this).css('margin-left', Y + 'px');  
  41.   
  42.         });  
  43.   
  44. }  

 

Demos Set 1: Positioning Images Around A Circle or Ellipse

For the purposes of this section, I’ve written a very minimalist library called jsShapeLib which you can download or fork on Github here. It’s purpose is to provide you with raw coordinate positions using formulae for both circles and ellipses, such as the one I’ve mentioned above. To use jsShapeLib, all you need to do is call the drawCircle() or drawEllipse() functions with their relevant parameters.

See below for two demos of how you can use jsShapeLib to position items. Note that because we’re using primarily standard JavaScript functions to achieve our coordinate positioning, all of this code is cross-browser compatible out of the box.

jsShapeLib Demo 1: Drawing A Circle Of Images

jsShapeLib Demo 2: Drawing An Ellipse Of Images

jsShapeLib Demo 3: Drawing A Permutated Circle With LightBox Functionality

 I hope to extend jsShapeLib in the future to support much more complex shapes including parallelograms and triangles amongst others.

Part 2 – jQuery Roundrr

Now that we’ve gone through how to plot images around a circle, how about we take this further?. When you move outside of the concept of using a rectangle for your content, you open up a whole new world of user interface possibilities.

How about automatically animating your circle, spinning it or turning it into a content gallery with a central area of focus?. I decided to take jsShapeLib further to provide all of these things in a jQuery plugin.  I wanted to make sure that the plugin would be able to offer enough flexibility to do three things:

  1. Allow users to create interesting interfaces that go beyond just plotting
  2. Allow users the flexibility to add as many images as they wanted and easily configure the radius of the circle
  3. Offer a complete events model for interacting with the content circle with configuration options

Looking around I saw that there was already a plugin out there that did a little of what I wanted called RadMenu by Nirvana Tikku, so I decided to take the existing codebase, strip it down a little and then extend it to offer a better events model, more configuration options, autoplay features, ‘pick’ mode (which I will show you soon), keyboard event support and a few other extras.

How Does Roundrr Work?

Much like any other image gallery plugin, Roundrr works with normal lists of images and transforms them accordingly. It supports two modes which you can use depending on what you want to do – for most people the ‘standard’ mode should be fine but if you want to use ‘pick’ mode instead (see below) you can also take advantage of that.

To keep Roundrr compact, it encourages the idea of extending functionality through your front-end code using the events model. What this means is that Roundrr will provide you with the ability to plot, and animate in either direction your wheel/circle of images but more custom interaction features (such as displaying a larger image of a thumbnail in the center of the screen or displaying a tweet relevant to the thumbnail) are done outside of the plugin. This allows it to be relatively customizable.

To demonstrate how to get setup with Roundrr, let’s take a look at the ‘Pick’ demo and how you can recreate it.

How To Get Started With ‘Pick’ Mode

 

 

Step 1: Include Dependancies

view plaincopy to clipboardprint?
  1. <!--Include jQuery and jQuery roundrr dependancies-->  
  2. < script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"><!-- script-->  
  3. < script type='text/javascript' src='scripts/ui/jQuery.roundrr.js'><!-- script-->  
  4.   
  5. <!--First stylesheet configures Roundrr presentation, second is font-face (optional) -->  
  6. <link href="css/style.css" type="text/css" rel="stylesheet">  
  7. <link href="fonts/stylesheet.css" type="text/css" rel="stylesheet">  

Step 2: HTML/CSS

view plaincopy to clipboardprint?
  1. <div class="container"><!-- Right-hand navigation -->  
  2. <div id="roundrr_navigation"> </div>  
  3.   
  4.      <!-- central image -->  
  5. <div class="roundrr_center"> </div>  
  6.   
  7.      <!-- Speech bubble for captions -->  
  8. <div class="roundrr_speech"> </div>  
  9.   
  10.     <!-- actual caption text -->  
  11. <div id="roundrr_caption"> </div>  
  12.   
  13.     <!-- the pick which is displayed over the current image -->  
  14. <div id="roundrr_pick"> </div>  
  15.   
  16.     <!-- the container of images -->  
  17. <div id="roundrr_container">  
  18. <ul class="list">  
  19. <li class="item">  
  20. <div class="my_class"><img alt="Al Yankovic" src="http://a0.twimg.com/profile_images/246073324/IL2_bigger.jpg"></div>  
  21. </li>  
  22. <li class="item">  
  23. <div class="my_class"><img alt="Taylor Swift" src="http://a0.twimg.com/profile_images/390558464/Photo_190_bigger.jpg"></div>  
  24. </li>  
  25. <li class="item">  
  26. <div class="my_class"><img alt="Dandy Warhols" src="http://a1.twimg.com/profile_images/930308885/ban_bigger.jpg"></div>  
  27. </li>  
  28. <li class="item">  
  29. <div class="my_class"><img alt="Lenny Kravitz" src="http://a0.twimg.com/profile_images/1117384560/image_bigger.jpg"></div>  
  30. </li>  
  31. <li class="item">  
  32. <div class="my_class"><img alt="Katy Perry" src="http://a3.twimg.com/profile_images/1107052519/i_mblue_bigger.jpg"></div>  
  33. </li>  
  34.   
  35.   etc.     </ul>  
  36. </div>  
  37. </div>  

Step 3: JavaScript

Here’s the part where we initialize the Roundrr plugin through .roundrrwheel() and supply the configuration options we’d like to use. For further details on how to configure the plugin, please see the documentation section of this post.

view plaincopy to clipboardprint?
  1.          var currentImage = "";  
  2.          var interfaceLock = false;   
  3.   
  4.         jQuery("#roundrr_container").roundrrwheel(  
  5.         {  
  6.             mode: 'pick', //mode can be pick or standard  
  7.             autoplay: false,  
  8.             autoplayDirection: 'anticlockwise',  
  9.             autoplayDuration: 4000,  
  10.             centerClass: 'roundrr_center',  
  11.             listClass: 'list',  
  12.             itemClass: 'item',  
  13.             radius: 220,  
  14.             animSpeed:400,  
  15.             centerX: 29,  
  16.             centerY: 60,  
  17.             animationEffect: 1, //(1:off, 5:light,10:heavy, 15:subtle)  
  18.             selectEvent: "click",  
  19.             centerImageSrc: "images/placeholder2.png",  
  20.             //function called when selecting an item  
  21.             onSelect: function($selected)  
  22.             {  
  23. showLargeImage($selected, 'noanim');  
  24.             },  
  25.             //function called before animating the circle clockwise  
  26.             onNextBegin: function($m)  
  27.             {  
  28.                interfaceLock = true;  
  29.             },  
  30.                         //fuction called before animating the circle anticlockwise  
  31.             onPrevBegin: function($m)  
  32.             {  
  33.                interfaceLock = true;  
  34.             },  
  35.             //function called once an image has moved under the 'pick'  
  36.             onImageFocus: function($item)  
  37.             {  
  38.                           showLargeImage($item, 'none');  
  39.             },  
  40.             //function called once an image/image set is no longer under the 'pick'  
  41.             onImageBlur:  function($item)  
  42.             {  
  43.             },  
  44.             //function called once the animation has completed  
  45.             onAnimationComplete: function($menu)  
  46.             {  
  47.                  jQuery('.centerImage').attr('src', currentImage);  
  48.                  jQuery('.centerImage').load(function()  
  49.                  {  
  50.                     interfaceLock = false;  
  51.                  });  
  52.             },  
  53.             angleOffset: Math.PI,  
  54. //function called once the items have been displayed on screen  
  55.             onShow: function($menuitems)  
  56.             {  
  57.                 $menuitems.each(function(i)  
  58.                 {  
  59.                     var $this = jQuery(this);  
  60.                     $this.delay(i*100).fadeIn(500);  
  61.                 });  
  62.   
  63.             }  
  64.   
  65.         });  

Additional Functions

Here is an example of additional functions that are called during different events in the plugin setup. Here you’ll see how I call for a larger image to be displayed based on the thumbnail’s URL or how the clockwise/anticlockwise animations are called through next() and prev(). The keyboard events can also be seen below.

view plaincopy to clipboardprint?
  1. Query("#roundrr_container").roundrrwheel("show"); //initialize roundrrwheel  
  2.         $('#next').bind('click', spinMenuRight);  
  3.         $('#prev').bind('click', spinMenuLeft);  
  4.   
  5.         function showLargeImage($i, mode)  
  6.         {  
  7.   
  8.             interfaceLock = true;  
  9.             var thisImage   = $i.find('img');  
  10.             var focusedImage = thisImage.attr('src');  
  11.             var largerImage = focusedImage.replace('_bigger', '');  
  12.             var imageCaption = thisImage.attr('alt');  
  13.             var speechBubble =  jQuery('.roundrr_speech');  
  14.             speechBubble.fadeIn();     
  15.   
  16.             currentImage = largerImage;  
  17.   
  18.             jQuery('#roundrr_caption').fadeIn();  
  19.             jQuery('#roundrr_caption').html(imageCaption);  
  20.   
  21.             if(mode=='noanim')  
  22.             {  
  23.                 jQuery('.centerImage').attr('src', currentImage);  
  24.                  jQuery('.centerImage').load(function()  
  25.                  {  
  26.                     interfaceLock = false;  
  27.   
  28.                  });  
  29.             }  
  30.   
  31.         }  
  32.   
  33.            /*Spin the menu to the left*/  
  34.             function spinMenuLeft()  
  35.             {  
  36.                if(!(interfaceLock))  
  37.               {  
  38.                jQuery("#roundrr_container").roundrrwheel("prev");  
  39.                }  
  40.             }  
  41.   
  42.             /*Spin the menu to the right*/  
  43.             function spinMenuRight()  
  44.             {  
  45.               if(!(interfaceLock))  
  46.               {  
  47.                jQuery("#roundrr_container").roundrrwheel("next");  
  48.                }  
  49.             }  
  50.   
  51.             /*Keydown events*/  
  52.             $(window).keydown(function(event)  
  53.             {  
  54.                 var keycode = event.keyCode;  
  55.                 switch(keycode)  
  56.                 {  
  57.                   case 39:  
  58.                   spinMenuLeft();  
  59.                   break;  
  60.                   case 37:  
  61.                   spinMenuRight();  
  62.                    break;  
  63.              } });  
  64.   
  65.       });  

Documentation

If you would like to read more about the different configuration options available inRoundrr as well as find out what each of the plugin parameters do, you can find additional documentation on the Github page for the project here.

 

 

Demos And Downloads

Demo Set 2 – jQuery Roundrr

Demo 1: ‘Pick’ mode demo 

Demo 2: ‘Standard’ demo with more images and LightBox support

Demo 3: Tweets gallery demo

Demo 4: (User requested) An Autoplay demo in the clockwise direction

 

 

Thanks

Thats it! I hope you find Roundrr useful. If you liked it, please feel free to share it with your friends and colleagues by clicking the retweet button. Until next time, good luck with your projects!.