Images ophalen met PHP en laten zien met JS en HTML

[The Great HooD]

Ik zit met een probleem waar ik niet uitkom. Ik heb offline een HTML + jQuery (JS) website gemaakt waarbij je plaatjes op de achtergrond hebt waar je doorheen kunt scrollen dmv pijltjes. Dat werkte helemaal, echter wil ik het nu zo maken dat het dynamisch is. Ik heb een folder waar mensen foto's kunnen uploaden. Deze foto's wil ik met PHP ophalen en in een JS array zetten. Deze array kan ik gebruiken om doorheen te bladeren in jQuery.

Hier mijn code:

PHP:

<?php
    
    $dirname = "./images/fotosnieuwesite/";
    $images = scandir($dirname);
    foreach($images as $curimg){
        echo "$curimg <br />";
}; 
?>

Zo haal ik de plaatjes op (en laat ik ze nu nog even laten zien in HTML)

Dit is mijn JS bestand:

JavaScript:

$(document).ready(function()
{ 
                var lijstIndex  = 0;
                var fotoArray   = [];
            
            //Hier worden alle foto's alvast ingeladen, dit zorgt ervoor dat de pagina in 1x geladen is en niet telkens 
            //de foto opnieuw geladen moet worden.
            $(fotoArray).each(function() 
            {
                var image = $('<img />').attr('src', this);
            });
});
    

Hoe kan ik nu mijn array vullen?
Het mooist zou zijn om niet een lijst te genereren in HTML, die in een div zetten en niet te laten zien, en dan die lijst ophalen met JS..

[ Voor 16% gewijzigd door The Great HooD op 05-07-2012 12:02 ]

[CodeCaster]

Als je dat PHP-script nu eens een array in JSON laat retourneren, en de fotoArray vult met een AJAX-request naar dat script?

[OkkE]

De simpelste oplossing is denk ik om op de plaats van het lege Array (regel 4) direct met PHP de filenames te printen tussen de []. Wat CodeCaster zegt is netter, maar misschien iets lastiger.

[HyperioN]

http://php.net/manual/en/function.json-encode.php

PHP:

   $dirname = "./images/fotosnieuwesite/"; 
   $images = scandir($dirname); 
   $json = json_encode($images);
   echo $json;

JavaScript:

$(document).ready(function() {
   $.ajax({
            type: 'POST',
            url: "php-bestandje.php",
            dataType: 'json',
            async: true,
            success: function(data){ 
                      $.each(data, function(i, img) {
                            //do something
                      });
            }
   });
});

Niet getest.. maar zou moeten werken
Wel nog even de .. en . eruit filteren.

[NMe]

Kom op, je weet toch hoe je een array definieert in JavaScript? Zelfs als je json_encode niet kent is het dan toch niet meer dan domweg die syntax uitprinten met PHP? Hier had je met een beetje logisch nadenken ook zelf uit kunnen komen. Daarom, en omdat het zaakje inmiddels voor je is voorgekauwd, doe ik dit topic op slot.