Javascript Help

[cotton31]

I'm using jQuery to pull a JSON feed of Flickr images and append them to a div (following this tutorial). This bit works fine, but just adds the images in a row.

I'm trying to make it a bit neater, by using the jQuery Cycle plugin to display them with some navigation (like this) but it doesn't seem to do anything.

If I code in the images without using javascript, the cycle plugin works as it should do, but it doesn't seem to like working with the JSON script.

The Cycle script does get called, as I can see that it adds the UL with an id of "nav" before the div I'm targetting. It's as though it can't find the images within the div to work with - could this be a timing problem?

Any ideas?

Thanks,

 

[redeye_uk]

Can you post up your javascript code?

Im guessing you probably arent creating the cycle plugin in the callback done function

something like...

$.json("www.example.com", function($data) {
   //insert html into the dom

   // cycle plugin code goes here
});

 

[cotton31]

Here's the JSON code:

<script>
$.getJSON("http://api.flickr.com/services/feeds/photoset.gne?set=72157627443748841&nsid=useridgoeshere&lang=en-us&format=json&jsoncallback=?", function(data){
$.each(data.items, function(i,item){
$("<img>").attr("src", item.media.m).appendTo("#slideshow");
});
});
</script>

and then the cycle code:

<script>
$('#slideshow').before('<ul id="nav">').cycle({ 
    fx:     'turnDown', 
    speed:  'fast', 
    timeout: 0, 
    pager:  '#nav', 
     
    // callback fn that creates a thumbnail to use as pager anchor 
    pagerAnchorBuilder: function(idx, slide) { 
        return '<li><a href="#"><img src="' + slide.src + '" width="50" height="50" /></a></li>'; 
    } 
});
</script>

I've referenced the jQuery library and Cycle plugin too. I think the issue is that they are separate, which I think is what you were suggesting? How do I go about combining them?

 

[redeye_uk]

Something like this should do the trick

<script>
$.getJSON("http://api.flickr.com/services/feeds/photoset.gne?set=72157627443748841&nsid=useridgoeshere&lang=en-us&format=json&jsoncallback=?", function(data){
$.each(data.items, function(i,item){
$("<img>").attr("src", item.media.m).appendTo("#slideshow");
});
$('#slideshow').before('<ul id="nav">').cycle({ 
    fx:     'turnDown', 
    speed:  'fast', 
    timeout: 0, 
    pager:  '#nav', 
     
    // callback fn that creates a thumbnail to use as pager anchor 
    pagerAnchorBuilder: function(idx, slide) { 
        return '<li><a href="#"><img src="' + slide.src + '" width="50" height="50" /></a></li>'; 
    } 
});
});
</script>

 

[cotton31]

Thanks for that, it works fine!

I'm trying to replace part of the url that the JSON query returns, so that it serves larger images. I need to replace "_m" with "_b".

I thought I could use .replace(_m,"_b") before I append it to the div, but that just causes my script to fail.

Can you help?

 

[cotton31]

Actually scratch that, I've sorted it. A stray bracket was the issue!