Question

$(document).ready(function() {

$.getJSON("http://api.flickr.com/services/feeds/groups_pool.gne?id=89254480@N00&\
lang=en-us&format=json&jsoncallback=?", getJSONimages);

function getJSONimages(data) {
var htmlString = "";
$.each(data.items, function(i,item){
var sourceSquare = (item.media.m).replace("_m.jpg", "_s.jpg");
htmlString += '<img src="' + sourceSquare + '" />';
});
$('#slideshow').html(htmlString);
}
})

The above gets the images in the format I need them for the slideshow:

<div id="slideshow"><img src="url"></div>

And the code below is the slideshow which works good on its own:

$('#slideshow').slideshow({
timeout: 2000,
type: 'random',
pauselink: 'sequence',
fadetime: 2000
});

Of course, there is another 2kb js file loaded, part of the slideshow, and the
jQuery library loaded from Google.

I am a begginer in JavaScript and I simply don’t get it, it doesn’t work, I am
guessing I have to run the first code to get the img tags in the #images div and
then run the js code for the slideshow.. but how do I do that?

Both in the same tags doesn’t work, separately doesn’t work, both of
them in the header.

Any ideas please? Thank you.

P.S. I didn’t find any rules regarding this and I hope I do not break the rules, I really like this community as I have learnt a lot here. Here’s the link.. http://demetriad.co.uk/flickr-test/

Answer 1

I think the problem here is that you’re running the slideshow script when the HTML is empty. That script will set up all of the images within the target element to be part of the slideshow, and there are no images until the ajax call has completed.

You could maybe try moving the code that starts the slideshow to the end of the ajax callback