Friday, 24 April 2015

243: The Vanus Temple's many great tutorials

Checking back over the tutorials on The-Vanus-Temple to find the 360 spin code for my post on the 40K calendar, I realised just how much cool info there is on that website and wanted to catalogue and share some of my favourite links:
I'd definitely recommend you go and check those posts out, and have a little look around on his site too, its very worth the time.

... and just in case anything were ever to happen to it, I'm going to copy the code for the 360 spin tutorial here (all credit to DezartFox and The-Vanus-Temple, any errors are in my transcription).

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{ /*Change the size to whatever size you want to display the image at */  
     width:640px;  
     height:480px;   
   }  
 </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, /*direction of rotation, change to false if images 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 :)


Code added to the post using http://codeformatter.blogspot.co.uk/

1 comment:

LinkWithin

Related Posts Plugin for WordPress, Blogger...