ordenar imagenes

[mazaku]

tengo el siguiente codigo para mostrar imagenes y sirve bien pero hay ocasiones en que algunas imagenes me las muestra de esta forma

1.jpg
10.jpg
11.jpg
2.jpg
2.jpg etc...

y yo quisiera fuera mas ordenada

1.jpg
2.jpg
10.jpg
11.jpg
20.jpg etc...

por que habra ocasiones en que si las muestra bien y algunas veces no?

este es el codigo

Código HTML:

<SCRIPT LANGUAGE="JavaScript">
 var current = 0; 
var images = [<?php
 
        if(is_dir($dir)){
            $arreglo = scandir($dir);
			natsort($arreglo);
            foreach($arreglo as $file){
                if($file != '.' && $file != '..' && $file != "Thumbs.db"){
                    if($i==0)
                        $firstpic=$file;
                    $i++;
                    $filenames .= "'".$file."', ";
					
                }
            }
            echo substr($filenames, 0, -2);
        }
 
?>];


function next() { document.images.show.src = document.slideform.slide[current+1].value; document.slideform.slide.selectedIndex = ++current; }

function previous() { document.images.show.src = document.slideform.slide[current-1].value; document.slideform.slide.selectedIndex = --current; }  

function change() { current = document.slideform.slide.selectedIndex; document.images.show.src = document.slideform.slide[current].value; }
 //  End --> 
</script> 

Código HTML:

<input type=button onClick="previous();" value="Anterior" title="Anterior" class="button">
          <input type=button onClick="next();" value="Siguiente" title="Siguiente" class="button"> 

gracias por su ayuda