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.

A simple demo.

Here’s how.

1. Install and reference the Prototype and script.aculo.us libraries.

2. Create the track and slider HTML nodes. (CSS inline for simplification)

var demoSlider = new Control.Slider(’handle1′,’track1′,
{axis:’horizontal’, minimum: 0, maximum:200, alignX: 2, increment: 2, sliderValue: 1});

demoSlider.options.onSlide = function(value){
  scaleIt(value);
}

demoSlider.options.onChange = function(value){
  scaleIt(value);
} 

5. Finally, create the HTML for our images.

<div style=”border: 1px solid #ddd; width: 424px; overflow: auto;”>
  <div class=”scale-image” style=”width: 190px; padding: 10px; float: left;”>
    <img src=”/images/content/blog/scaler_1.jpg” width=”100%”/>
  </div>
  <div class=”scale-image” style=”width: 190px; padding: 10px; float: left;”>
    <img src=”/images/content/blog/scaler_2.jpg” width=”100%”/>
  </div>
</div> 

There are definitely some areas to clean up (redundant div width specifications, for example), but for a quick demo it will suffice. Tested with Firefox, Safari and Win IE 6.

Update: There appears to be a small issue in IE; the slider disappears when you start dragging.
Update: Fixed. Moved the handle image to an actual img.
Update: Corrected a typo. (Fluxium != Fluxiom)

Demo: http://www.agilepartners.com/blog/2005/12/07/iphoto-image-resizing-using-javascript/

Source: http://www.agilepartners.com/blog/2005/12/07/iphoto-image-resizing-using-javascript/

Related Listings:

1. jQuery Image Stip Working for Obu Web i’ve found myself spending less time...
2. Delayed Image Loader Script for Prototype lazierLoad is Bramus! his take at writing a delayed javascript...
3. Hoverbox Image Gallery New Script Additionally, thanks to Craig Erskine this now works without the...
4. Onload Image Fades Script A function to show an ‘image loading…’ message and subsequent...
5. Fix Resize Event in IE In IE the window resize event is fired multiple times...

Do you like this post?

Email: