Image Scaling with AJAX

  • javascript • howto • it • curiosity • english
  • 126 words

It's powered with prototype.js and script.aculo.us: nice!

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.
<script src="http://www.agilepartners.com/scripts/prototype.js" type="text/javascript" language="javascript"></script>

A simple demo. (a Cut&Paste from the source site ;) )

<div class="scale-image" style="padding: 10px; width: 190px; float: left;"><img src="http://www.agilepartners.com/images/content/blog/scaler_2.jpg" width="100%"/></div>
<div class="scale-image" style="padding: 10px; width: 190px; float: left;"><img src="http://www.agilepartners.com/images/content/blog/scaler_3.jpg" width="100%"/></div>
<div class="scale-image" style="padding: 10px; width: 190px; float: left;"><img src="http://www.agilepartners.com/images/content/blog/scaler_4.jpg" width="100%"/></div>
<div class="scale-image" style="padding: 10px; width: 190px; float: left;"><img src="http://www.agilepartners.com/images/content/blog/scaler_5.jpg" width="100%"/></div>
<div class="scale-image" style="padding: 10px; width: 190px; float: left;"><img src="http://www.agilepartners.com/images/content/blog/scaler_6.jpg" width="100%"/></div>
</div>
<p><script type="text/javascript" src="http://www.agilepartners.com/scripts/scale_demo.js"></script></p>

Created by Agile Partners.com. I suggest to read the howto: it's simple and clear. And demonstrate the power of script.aculo.us and prototype.js.

Source, Downloadblog.

comments powered by Disqus