360 Spin Tutorial

I’ve had a few requests on how I did the 360 Spin galleries. Well I’ve managed to set up the code so that it’s usable by anyone! (I hope)


First thing we need are photographs! I won’t delve into the photography side too much, as many of you already have a basic understanding on the subject.

For my set up I have a plinth attached to a spray can lid that I can rotate, the spray can lid is secured down, and the plinth attached by a random piece of plastic so that it spins on top of the spray can. I have 32 small dots on the lid so that I can take a smooth set of photos. So basically something to make your model rotate in place to get a smooth transition. None of this is essential, it just gives a smoother spin. You can do it with as few or as many photos as you wish.



I have a home made lightbooth too, with three lamps giving me light. Again not a necessity, but it give a professional look and feel.

My camera is set up on a tripod with Macro mode on. This allows me to take close up photos.




The hard part is the code! This is what I will explain, and how to change it to your needs.
It works on this open source project, I’ve made this tutorial so there is nothing for you to download, all you need are photos!

Below is the code, copy and paste it into your post (note this doesn’t work in forums, as they don’t allow html etc to be used in posts), and edit the following:

<style type="text/css">
#Spin{
width:640px;
height:480px; /*Change the size to whatever size you want to display the image at */
}

</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://code.vostrel.cz/jquery.reel-edge-bundle.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#Spin').reel({
preloader: 73,
hint: 'Click and Drag',
frames: 33, /*replace 33 with the number of images you've used*/
opening: 3,
cw: true, /*depending on what direction you took your images, change to false if they spin the wrong way*/
entry: 1,
images: [
'image1 url', /*replace all the image URLs with the links to your images*/
'image2 url',
'image3 url',
'image 4 url' /*make sure there's no comma after the last image*/
]
});
});
</script>

<center><img class="jquery-reel-preloader" id="Spin" src="your image here">
</center>

So, you have your photos, simply replace the image1 url parts with the links to your images, making sure to keep the apostrophes and commas. You can add as many photos as you want, as long as you update the number of image on the frames: line to the amount of images you have. Finally replace the your image here with the link to your image you want to start with (usually the first in the sequence), keeping the quotation marks.

I’ve used the code in blogger and wordpress, and it works on both of them at the moment :)

  • http://iron-legion.blogspot.com/ b_G

    That’s brilliant, thanks loads for sharing!

  • http://www.the-vanus-temple.com Dezartfox

    No problemo! WIll update with post with images and more info shortly! Had it sat in Drafts for ages so thought I’d post it.

  • http://coloureddust.blogspot.com/ Coloured Dust

    Hi,
    thanks a lot! I took to be the subject just a few times but never tightened it to the end. Your tutorial is great!

  • Karitas

    nice one man, thanks for that.. stolen.. http://excommunicatetratoris.blogspot.co.uk/

    works well.. just need to be a tad more consistent in my photography.

  • http://www.the-vanus-temple.com Dezartfox

    Looking great!! :)

  • Pingback: 360 Spins: Terminator Banner Bearer | ++ THE VANUS TEMPLE ++()

  • Pingback: 360 Spins: OGRE FIREBELLY | THE VANUS TEMPLE()