Creating an associative array from PHP through AJAX in JQUERY - php

Question

My first cry for help here.
Not sure if my title is properly explicit but it's the only one I can come up with right now. I've been at it for 2 days now and I have read so many different things that I think I am getting completely confused. I'll try to be as precise as possible.
Here's my problem,
First, this is the jQuery code I am basing this on:
$thumbnails.find( 'a' ).each( function() {
pictures.push({
src: $( this ).attr( 'href' ),
title: $( this ).find( 'img' ).attr( 'title' ),
valign: $( this ).find( 'img' ).data( 'valign' )
});
})
You notice the pictures.push in there.
Now, this goes with,
$.vegas( 'slideshow', {
backgrounds: pictures,
delay: 4000,
fade:5000
})( 'overlay' );
Note how the background attribute uses pictures to get the images' names it needs. I'm not sure now how to call pictures. Is it an associative array or is it an object?
Anyhow, I don't want to get the images' filenames from the HTML nodes. I am using PHP to fetch filenames in directories on the server and generate an XML document with those filenames.
Here is the part that generates the XML document in my PHP script, (I only need 5 images for my need)
header("Content-type: text/xml");
echo '<?xml version="1.0"?>';
echo "<img>";
for($i=0;$i<5;$i++){
echo "<src>img/" . $rep_aleatoire[$i] . "/" . $img_aleatoire[$i] . "</src>";
echo "<title>" . $img_aleatoire[$i] . "</title>";
}
echo "</img>";
And this is what thes XML document looks like,
<img>
<src>img/portraits/DSC_0161.jpg</src>
<title>DSC_0161.jpg</title>
<src>img/nature/DSC_0019 copy-tych 3.jpg</src>
<title>DSC_0019 copy-tych 3.jpg</title>
<src>img/portraits/DSC_0157.jpg</src>
<title>DSC_0157.jpg</title>
<src>img/editions/DSC_0053.jpg</src>
<title>DSC_0053.jpg</title>
<src>img/editions/DSC_Ant.jpg</src>
<title>DSC_Ant.jpg</title>
</img>
And here is the JQUERY part I use to get that XML data,
$.get("main.php", function(data){
var rep = new Array;
var file = new Array;
$(data).find("img").each(function(){
$(this).find('src').each(function(i){
rep[i] = $(this).text();
});
$(this).find('title').each(function(i){
file[i] = $(this).text();
});;
for(i=0;i<rep.length;i++){
pictures.push({
src: $(rep[i]),
title: $(file[i])
});
}
});
});
pictures has been initialized out of the scope of this function so it should be available anywhere I need it but it is not. If I try to access it outside that function, it is empty.
Also, when within the scope of that function, all it contains is objects. I don't even know if I'm doing it the proper way. I have tried so many different ways I can't even remember. I just can't get the actual data generated in the XML document.
I sure hope I have been clear enough and you guys understand what I am after.
I simply want to generate the proper format of pictures so it is usable in the $vegas function.
Any help will be greatly appreciated.

Answer 1

First of all. Always declare your variables.
Wrong declaration:
var rep = new Array;
var file = new Array;
Should be either
var rep = new Array();
var file = new Array();
Or even better:
var rep = [];
var file = [];
Declare i, you was using in the last loop.
for(var i=0;i<rep.length;i++){
...
Or even better:
var i;
for(var i=0;i<rep.length;i++){
..
When you done with that you'll notice that you trying to access jquery objects by your array value.
pictures.push({
src: $(rep[i]),
title: $(file[i])
});
And you probably meant:
pictures.push({
src: rep[i],
title: rep[i]
});
Of course, make sure that var pictures available in all scopes, where you are using it.