Image Scaling with AJAX

  • javascript • howto • it • curiosity • english
  • 188 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>   <script src="http://www.agilepartners.com/scripts/scriptaculous.js" type="text/javascript" language="javascript"></script>

A simple demo. (a Cut&Paste from the source site ;) ) <div style="margin: 10px 0pt 10px 100px;"> <div id="track1" style="margin: 4px 0pt 0pt 10px; width: 200px; background-image: url(http://www.agilepartners.com/images/content/blog/scaler_slider_track.gif); background-repeat: repeat-x; background-position: left center; height: 18px;"> <div class="selected" id="handle1" style="width: 18px; height: 18px; left: 196px; position: relative;"></div> </div> </div> <div style="border: 1px solid rgb(221, 221, 221); overflow: auto; width: 424px; margin-bottom: 30px;"> <div class="scale-image" style="padding: 10px; width: 190px; float: left;"></div>

<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.