How to make ‘sliding using arrow keys’ work in a JSON file?

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.

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.

So I decided to remove all the image markup and have a JSON file for the images:

Here is the code that I am using in order to retrieve the data and to 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> |' + 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, but no errors are generated.

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.

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

Leave a Reply

*

Hire Me
Follow Me!
Search
Most Popular Articles & Pages
Because your vote is Important
Sorry, there are no polls available at the moment.
Categories