Monday, February 6th, 2006
iPhoto-like image resizing using Javascript
Category: Ajax
, JavaScript, Programming
In a post from the Aglie Partners’ weblog, John Berry shows how, with the help of Prototype and script.aculo.us, you can use Javascript to create an “iPhoto-like image resizing” tool.
Upon seeing the Fluxiom intro video, I was compelled to figure out how they pulled off iPhoto-like image scaling in a browser. Leveraging the work of others, it’s actually very simple.
If you use the script.aculo.us slider control to capture input values, it’s really just a matter of converting those values into something useful and modifying styles.
Included in the post is an example of the script at work, using a slider to resize six pictures simantaneously contained in a DIV that adjusts to their fluid sizes well. After the example comes the good stuff - the instructions and code to get this fun little tool working. He notes that there are still some issues with it, but it’s fluid in most major browsers. There’s similar functionality seen over on the BubbleShare site…
It may be related to the number of elements underneath the example in question, but for whatever reason the provided demo seems incredibly slow. The slider (and images) should be able to update and refresh in near “real-time,” as with the Bubbleshare implementation. (see example here)
As a side-rant, it’s a pity that browsers seem unable to resample images as nicely as image editing programs. ;)
One trick that could be tried is instead of using absolute values, use a relative (em) size for images; then you could adjust the font-size of the parent container, and the images underneath would scale accordingly. This way, you only actually update one element..
A lot of work done there, a lot of pretty stuff, brillant minds at work obviously, but the demo video is like a brtiney or tata young music video… It’s way too much, too fancy… Watching it, i’m asking myself: is this some more commercial crap trying to sell some teenage “music”, or is this actually good and useable?
I’d better wait for http://smartimagine.com …