json and jquery image gallery

Question

few months a go i created an image sliding gallery where when use click the left/right arrows one image slides out and the new image slides in (it worked good)

all the related images and descriptions i had to write went in my php file; now i wanted to have some new images and i found that add and modifying this content took me longer than it should - so i decided to remove all the image markup and have a JSON file for the images:

this is the code that i am using to retrieve the data and inject it in the dom

 $.getJSON('data.txt', function(data) {
var len = data.length, i; for (i = 0; i < len; i += 1) { 
 $("#image_container").append(
 '<div class="image_frame"><img class="image" src="' + data[i].image + '" width="620px" alt="' + data[i].alt + '">
<div class="caption"></div><div class="innercaption"><p><span>' + data[i].category +
 '</span> &#124;' + data[i].title + '</p></div><div class="caption2"></div><div class="innercaption2">
<p><span>Description</span> &#124 ' + data[i].description + '</p></div></div>' );
  };
});

it runs at the start of document ready - but now the sliding arrows do not work (there is no error) my guess is that i could be the fact that the content is created at the same time as the slider code, so they can't see each other

is there a way to fix this (maybe run the getJSON in a way that the slider code can see it)

i hope this is clear. thanks for your help