me.Blog()

In this tutorial we’ll be using Reel, a popular JQuery plugin for this kind of functionality. First, here’s a demo of this plugin in action

Procedure
1. If you’ve perused the Reel website, you’ll see that this plugin mainly requires several pictures of your subject from all lateral directions at a uniform distance which come full circle; Reel recommends 36 or above. Although this is how it’s primarily used, feel free to take your audience on whatever fantastical, scrollable ride you want. Either way, to make it happen you’ll need photos depicting discrete instances of this continuous sequence. The method of getting these photos is ultimately up to you, but I can give you a suggestion that may bring you quicker results if you send me message, although possibly at the expense of quality. This, of course, is in conformity with Newton’s 4th law: quality = 1 / speed. Remember to record the number of images you have, a number which I’ll reference by imageFrames.
2. Once you have the pictures, you need to make a sprite/composite image which contains all of your pictures in sequence. Essentially, what Reel does is move the viewing window through this composite image space in sequence to simulate the motion. Now, creating the image is up to you, but I have some software suggestions:
  TexturePacker - This software gives you great control over the quality and format of your image, which is why I list it first. It has a free demo, in case you’re thinking of implementing reel only a few times. After a while, the freeness expires and it’ll run you around $30 for a license, at least at the time of this posting.
  
  ImageMagick - This software is completely free. It comes as a command line utility, but there are several graphical clients to download for free out there. Personally, I wrote a windows batch file to do the job, which I can send to you if you send me a message.
  
  While making the image, make sure it ends up rectangular. Don’t worry about empty space trailing the end of the image, Reel will ignore that because it’ll know to stop before and loop up the top based on the number of pictures you have. Also, keep a note of the dimensions of each image in the composite. For later purposes, I’ll reference these by imageWidth and imageHeight.
3. Once you’ve made the image, it’s time to edit the Tumblr html code. First, upload the first image in your original discrete sequence onto Tumblr as a photo post. On the upload page, choose a unique identifier that has no spaces and use it to set a custom post url, an option which you’ll find on the right column of the upload photo screen. For instance, a valid id could be “firstImage” without quotes, so that your post URL will become “/post/123456/firstIMage”. I’ll reference this unique identifier by imageID. Afterwards, you need to find a way to upload the composite image online so that Reel can reference it. I chose to upload mine to imgur. What’s important is that you have a url for the image which I’ll call imageURL. Now go into your tumblr html editor and add the following code just after the end of the <body></body> block, which should be at the bottom of the page:
  
  <script src=”http://code.vostrel.cz/jquery.reel.js” type=”text/javascript”></script>
  
  <script type=”text/javascript”>
  
  var pid = imageID;
  
  var width = imageWidth;
  
  var height = imageHeight;
  
  var frameNumber = imageFrames;
  
  var imageUrl = imageURL;
  
  $(document).ready(function() {
  
  $(“.photo”).each(function(){
  
  var photoID = $(this).attr(“id”).match(pid+”$”);
  
  $(this).attr(“width”,width);
  
  $(this).attr(“height”,height);
  
  if(photoID == pid){
  
  $(this).attr(“id”,pid);
  
  }
  
  });
  
  $(“#”+pid).reel({frames: frameNumber, image: imageUrl, suffix: “”});
  
  });
  
  </script>
  
  This will include the Reel plugin into your page so that you may use its functionality, as well find the post corresponding to the id you gave it and make it Reel. Make sure to change the data in the variables accordingly. Next, find the portion in the code that looks like the following
  
  {LinkOpenTag}<img src=”{PhotoURL-500}” width=”320” height=”240” class=”photo” alt=”{PhotoAlt}” />{LinkCloseTag}
  
  {LinkOpenTag}<img id=”{Permalink}” src=”{PhotoURL-500}” width=”320” height=”240” class=”photo” alt=”{PhotoAlt}” />{LinkCloseTag}
  
  and add the id=”{Permalink”} portion to it as shown above. As a final note, make sure that your theme includes JQuery itself.
  
  Once this last part’s done, so are you! Save and go look at your fancy new blog.
- 7 months ago

Procedure