Tuesday, May 15, 2012

jQuery Aligned With TimThumb

I recently had to figure out a way to crop images quickly, so I decided to use timthumb, which worked quickly and easily.  However, there were occasions where an portrait-oriented image was loaded into a landscape-oriented frame, and the center cropping ended up showing a person's midsection instead of an appropriate headshot.  With this in mind, I decided that I had to make a simple overlay that will allow the use to realign the timthumb crop as desired.  While I was at it, it seemed to make sense to also handle jQuery image scrolling/panning as well using the same arrow icons, so I added a conditional to the self-contained HTML.

You can download the code here.  By default, it will utilize jQuery scrolling.  In order to utilize timthumb, you must install the timthumb.php in the same directory and set the proper permissions (or point the html to the appropriate URI) and them pass the querystring ?tt=1 to the http call.  Not sure if anybody will find this useful, just thought I'd drop a quick post about it since I whipped it up.