treehouse : what would you like to learn today?
Web Design Web Development iOS Development

jQuery Help

  • Ok this is first time using it, im trying to make it so in my sidebar my recent tweets show up recent post, and flickr photos, I was trying to make it so it shows last 4 or 6 pictures added, but i've search for help the only code i can find is this so i put it in my HEAD tags in my header.php file and made a div with id of images where i wanted it in my sidebar, but nothing shows up it just puts a chunk of blank space..



    <script type=\"text/javascript\" src=\"http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js\"></script>
    <script type=\"text/javascript\">
    // Don't execute any code until the DOM is ready!
    $(document).ready(function(){

    // Our very special jQuery JSON fucntion call to Flickr, gets details of the most recent 20 images
    $.getJSON(\"http://api.flickr.com/services/feeds/photos_public.gne?id=37526582@N05&lang=en-us&format=json&amp;amp;jsoncallback=?\", function(data){

    // Randomly choose where to start. A random number between 0 and the number of photos we grabbed (20) minus 9 (we are displaying 9 photos).
    var iStart = Math.floor(Math.random()*(11));

    // Reset our counter to 0
    var iCount = 0;

    // Start putting together the HTML string
    var htmlString = \"<ul>\";

    // Now start cycling through our array of Flickr photo details
    $.each(data.items, function(i,item){

    // Let's only display 9 photos (a 3x3 grid), starting from a random point in the feed
    if (iCount > iStart &amp;amp;&amp;amp; iCount < (iStart + 10)) {

    // I only want the ickle square thumbnails
    var sourceSquare = (item.media.m).replace(\"_m.jpg\", \"_s.jpg\");

    // Here's where we piece together the HTML
    htmlString += '<li><a href=\"' + item.link + '\" target=\"_blank\">';
    htmlString += '<img src=\"' + sourceSquare + '\" alt=\"' + item.title + '\" title=\"' + item.title + '\"/>';
    htmlString += '</a></li>';
    }
    // Increase our counter by 1
    iCount++;
    });

    // Pop our HTML in the #images DIV
    $('#images').html(htmlString + \"</ul>\");

    // Close down the JSON function call
    });

    // The end of our jQuery function
    });
    </script>
  • You have some strange html entities in your post which I'm not sure if they are there in your source but they shouldn't be that's for sure.

    On the line that begins:
     if (iCount > iStart &amp;amp;&amp;amp; iCount ...
    change &amp;amp;&amp;amp; to &&

    And change the line that begins:
    $.getJSON(...
    to
    $.getJSON(\"http://api.flickr.com/services/feeds/photos_public.gne?id=37526582@N05&lang=en-us&format=json&jsoncallback=?\", function(data){