THE VANUS TEMPLE

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 🙂