Magento: Sort product display images in alphabetical order

Question

I am uploading about 30 images for each product with numeric names like:

001.png 002.png 003.png ....

but after uploaded it showing on front end like

002.png 003.png 001.png ....

how could it be auto sort in front end following is the piece of code from Magento media.phtml

<ul class="product-image-thumbs">
        <?php foreach ($this->getGalleryImages() as $_image):?>
            <li>
                <a href="<?php echo Mage::helper('catalog/image')->init($_product, 'image', $_image->getFile()); ?>" title="<?php echo $this->htmlEscape($_image->getLabel()) ?>" rel="prettyPhoto[mixed]">
                    <img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize($_thumbWidth, $_thumbHeight); ?>" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" />
                </a>
            </li>
        <?php endforeach?>
        <?php if ($_360IsSet && !$_embedded):?>
            <?php $_360ViewWidth  = preg_replace("/[^0-9]/", "", $_360ViewWidth) ?>
            <?php $_360ViewHeight = preg_replace("/[^0-9]/", "", $_360ViewHeight) ?>
            <li>
                <a href="<?php echo $this->getSkinUrl('webrotate360/frame_' . $_viewerSkin . '.html') . '?iframe=true&width=' . $_360ViewWidth . '&height=' . $_360ViewHeight ?>" rel="prettyPhoto[mixed]">
                    <img src="<?php echo $_360icon ?>" />
                </a>
            </li>
        <?php endif?>
    </ul>

Answer 1

sure @WhiteHat here is my code:

var mediaImages = [<?php $numItems = count($this->getGalleryImages());$i = 0;foreach ($this->getGalleryImages() as $_image):?> <?php echo '"'?><?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(450, 450); if(++$i === $numItems) { echo '"';} else { echo '",';}?><?php endforeach?>];
var mediaImagesSorted = mediaImages.sort();
jQuery('.MediaDiv').html(mediaImagesSorted);