Script per ridimensionare le immagini sul sito web da parte degli utenti in tempo reale

Tra i vari modi di fare image resize, su iPhoto tempo fa eraapparso un effetto molto accattivante per effettuare ilresize delle immagini direttamente nel browser. In questoarticolo cercheremo di emulare questo effetto, ricorrendosolo a Javascript, in particolare alla libreria slider.js discript.aculo.us. Potete già vedere quello chesarà il risultato direttamente qui. E' possibilescaricare i files inerenti questo esempio qui oppure dallasezione downloads.

Partiamo

1. Innanzitutto dovrete scaricare ed installare Prototype escript.aculo.us. Siate certi di aver estratto anche il fileslider.js di scriptaculous, fondamentale per il buon esito diquesto esempio

2. Partiamo ora con la creazione del div che conterràl'indicatore grafico ed i nodi HTML . (viene utilizzatoper maggior chiarezza il CSS all'interno dell'htmlstesso)

<div id=”track1″ style=”width: 200px; height:18px;”>  <div id=”handle1″ style=”width: 18px; height: 18px;”>     <img src=”/images/content/blog/scaler_slider.gif”/>  </div></div>

3. Il resize verrà gestito da una funzione cheverrà chiamata ogni volta che muterà il valoredello slider . Questa funzione procederà alla collectdi tutti i nodi ai quali applicare il resizing,ricalcolerà i valori dell'area in questione,scalandola di conseguenza.

function scaleIt(v) {  var scalePhotos = document.getElementsByClassName(’scale-image’);  floorSize = .26;  ceilingSize = 1.0;  v = floorSize + (v * (ceilingSize - floorSize));  for (i=0; i < scalePhotos.length; i++) {    scalePhotos[i].style.width = (v*190)+ ’px’;  }}4. Creiamo ora, all'interno della funzione di cui sopra, l'oggetto per la costruzione dello slider: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. Come ultimo passo, ci resta da dar vita al codice html perle immagini da inserire nel nostro slider:

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