First you need images, make sure you have a main image on your page. In this example the image is:”ipod.jpg”. If there are other images in that directory with the name ipod_01, ipod_02 the script changes the ipod.jpg into a 360 presentation. If there are no other images found the main image stays untouched.
Programs we use to manage the images are:
You need an image which can be transformed into a 360 presentation. Give it the id : ” javascriptviewer” and the rest is done by the script.
<!--Tag your image with the id javascriptviewer--><p>
<div><img id="javascriptviewer" src="http://360-javascriptviewer.appspot.com/images/ipod/ipod.jpg" alt="" /></div>
Load the script
Call the javascript file. For demo use you can grab the one from our site or if you bought a license you can use the one from own domain. In this case we use a common loader, but of course you can change it to fit your needs.
<!--Paste this script somewhere in your website code-->
<script src="http://360-javascriptviewer.appspot.com/latest/loader.js" type="text/javascript"></script>
<script type="text/javascript">
mloaderx = new loader(
{
tag:'javascriptviewer',
frames:72,
speed:8.3,
ending:6,
zoom:false //set to true to use the zoomfunction
});
</script>
The result
As you can see this is very easy and you don’t need to be an expert. If you want more control, edit the loader script and make it yours. We love to see the results.
Options
Download the example file and change the loader script to fit your needs.
You can change rotation speed, slowing down speed, preloader, instructions, animations etc…
If you need any help please let us know
