HTML5: Threesixty.js Generates 360 Views From Images

March 10th, 2013

360 degree walk-arounds, just as you know them from the major automobile brands: that is what you can expect the fresh jQuery plugin Threesixty.js to deliver. It does this using HTML5 data attributes, thus showing a very simple approach that has you fiddling together a nice 360 in a matter of minutes.


Threesixty.js: Data Attributes and an Image Gallery

Threesixty.js doesn’t require much. jQuery and the path to a gallery of your images to be transformed into a 360. The following example aggregates 61 images to show a vexel gem in rotation. Images are named after the following convention: filenamenumber.ext, in our example gem0.jpg, gem1.jpg,…, gem61.jpg. The image with the zero in the filename defines the starting point.

<div class="threesixty" data-path="assets/img/src/gem{index}.JPG" data-count="61"></div>

The div element gets placed inside the HTML at the position you want the 3D object to be seen. Using HTML5 data attributes, in this case named data-path and data-count, important values for the intended presentation are handed over to the function from the HTML source code.

This JavaScript was used for the vexel gem:

        dragDirection: 'horizontal'

The function call can be extended using parameters. In the example only dragDirection got added. This parameter defines the axis on which the rotation shall occur. Per default rotation is started horizontally, vertical rotation is also possible. Simply change the value to vertical. It is not (yet) possible to rotate both axis at once.

Motion is controlled via links for previous and next frame like this


and this


Parameters draggable and useKeys add the possibility to drag the object holding the left mouse-button clicked and to use the arrows key for rotating to the left/right/up/down. Formerly intended support of the mouse wheel got canceled by the developer nick-jonas.

Threesixty.js is a young project, carrying the version-number 0.1.2. It can be downloaded from Github and used freely. Make sure that you implement some kind of preloading, as you can undoubtedly imagine how much time the loading of 61 images takes. Even the simple example of the vexel gem has you wait a while before rotation gets initiated.

Related Links

Dieter Petereit is a veteran of the web with over 25 years of experience in the world of IT. As soon as Netscape became available he started to do what already at that time was called web design and has carried on ever since. Two decades ago he started writing for several online publications, some well, some lesser known. You can meet him over on Google+.

Tags: , , ,

3 comments for „HTML5: Threesixty.js Generates 360 Views From Images
  1. Guillaume on March 11th, 2013 at 12:28 pm

    Same name, same function, but older and lighter and from a different author :

  2. Ramón Ramos on March 12th, 2013 at 8:08 pm

    Harder. Better. Faster. Stronger

    • Ederson on March 15th, 2013 at 9:29 pm

      I agree!