Incognito Mind

I hacked this theme I’m using a little to hide/show the sidebar. This allows me to put larger photos on my blog posts. Some day when I have some free time I’ll make my own theme which incorporates a fancier version of this… but here’s what this hack can do:

Example 1: I can have a link at the top of a blog post to hide the sidebar and grow the image.

This post contains hi-res images: Please hide the sidebar by clicking HERE.

Example 2: I have a toggle button on top of the sidebar to show/hide on any post.

(click on it!)

Example 3: I can link to a blog post with the sidebar hidden by setting hide=1

Link back to this page with sidebar hidden
LInk back to this page with sidebar showing

Incase anyone is interested, this is the code I used to resize the images. This code uses on the moo tools framework. The resize_all function takes an integer sz for width and a boolean instant (optional). The instant variable allows you to resize the image without the moo transition effects (this would be useful if you wanted the images resized on load).

const SZ_SMALL = 633;
const SZ_LARGE = 900;
function resize_all(sz, instant){
   if (null == sz){
      sz = SZ_SMALL;
   }
   if (null == instant){
      instant = false;
   }
   for (x=0; x<document.images.length; x++){

      h = document.images[x].height;
      w = document.images[x].width;

      if (w > 600){ // ignore tiny images
         factor = sz / w;

         nh = factor * h;
         nw = sz;

         if (true == instant){
            document.images[x].height = nh;
            document.images[x].width = nw;
         }
         else{
            document.images[x].set('morph',{duration: 'short',});
            document.images[x].morph({height: nh, width: nw});
         }
      }
   }
}