So I'm using the Flicker API to generate a slide show that pulls in the Image, Description and Title. I want to use the Cycle Plugin for the fade effect and Pager attribute to handle the navigation.

The problem is the Pager gets looped over-and-over along with the call to pull the images from Flickr:

Test Page: http://www.petermichaelsallen.com/flickrTesting

Script: http://www.petermichaelsallen.com/flickrTesting/flickr_import.js

   

    
 $(document).ready(function(){
    
 var apiKey = 'e63c7b561755bc26ab3b400538a03876';
    
 $.getJSON('http://api.flickr.com/services/rest/?&method=flickr.photosets.getPhotos&api_key=' + apiKey + '&photoset_id=72157623065840087&format=json&jsoncallback=?',
    
 function(data){
    
 $.each(data.photoset.photo, function(i,item){
    
 var photoURL = 'http://farm' + item.farm + '.static.flickr.com/' + item.server + '/' + item.id + '_' + item.secret + '_m.jpg'
    
 var photoID = item.id;
    
 $.getJSON('http://api.flickr.com/services/rest/?&method=flickr.photos.getInfo&api_key=' + apiKey + '&photo_id=' + photoID + '&format=json&jsoncallback=?', function(data){
    
 var imgCont = '<div class="headlineStoryContainer" id="story' + i + '"><img alt="' + data.photo.title._content + '" src="' + photoURL +'#'+ i +'"/><h3>' + data.photo.description._content + '</h3></div>';
    
 $(imgCont).appendTo('#headlineContainer');
    
 $('#headlineContainer').cycle({
    
 fx: 'fade',
    
 speed: 1250,
    
 timeout: 10000,
    
 pager: '#headlineNav',
    
 pause: 7
    
 });
    
 });
    
 });  });  });
   

Naturally, I would move Cycle out of the loop, but if I do that Cycle won't fire.

What do I do?

Note: I'm not very prolific with javascript or jQuery, but I get the basic gist of it.