title: How to make 'sliding using arrow keys' work in a JSON file?
body: <p>I created an image sliding gallery where when an user presses the left/right arrows one image slides out and the new image slides in. It worked good.</p>
  
  <p>All the related images and descriptions went in my PHP file. Now I want to have some new images and I found that adding and modifying this content took me longer than it should.</p>
  
  <p>So I decided to remove all the image markup and have a JSON file for the images:</p>
  
  <p>Here is the code that I am using in order to retrieve the data and to inject it in the DOM</p>
  
  <pre><code> $.getJSON('data.txt', function(data) {
  var len = data.length, i; for (i = 0; i &lt; len; i += 1) { 
   $("#image_container").append(
   '&lt;div class="image_frame"&gt;&lt;img class="image" src="' + data[i].image + '" width="620px" alt="' + data[i].alt + '"&gt;
  &lt;div class="caption"&gt;&lt;/div&gt;&lt;div class="innercaption"&gt;&lt;p&gt;&lt;span&gt;' + data[i].category +
   '&lt;/span&gt; &amp;#124;' + data[i].title + '&lt;/p&gt;&lt;/div&gt;&lt;div class="caption2"&gt;&lt;/div&gt;&lt;div class="innercaption2"&gt;
  &lt;p&gt;&lt;span&gt;Description&lt;/span&gt; &amp;#124 ' + data[i].description + '&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;' );
    };
  });
  </code></pre>
  
  <p>It runs at the start of document ready - But now the sliding arrows do not work, but no errors are generated.</p>
  
  <p>My guess is that it would be because the content is created at the same time as the slider code. So, they can't see each other.</p>
  
  <p>Is there a way to fix this (maybe run the getJSON in a way that the slider code can see it)?</p>