从rss获取另一个域的图像（然后附加）

Question

I want to get images from a flickr rss but this code won't get them. This is what I got up with after some help from my original qustion here : Jquery in Internet Explorer: find image problem(works in FF and Chrome)

The problem is getting the data in right format to my web page. My page's URL is : zalastax.co.cc/pictures.html

Javascript:

$.ajax({
    type: "GET",
    url: "js/getflickreasy.php",
    dataType: "xml",
    success: function(data) {
        $(data).find("item").each(function() {

            var item = $(this), title, description, thumbnail;

            title = item.find("title").text();
            description = item.find("description").text();
            thumbnail = item.find("img").attr("src");
        });
    }
});

PHP:

<?
header("content-type: text/xml");
readfile("http://api.flickr.com/services/feeds/photos_public.gne?id=42980910@N02&lang=en-us&format=xml");
?>

Edit: Mathews code works.
But I have a problem with appending some data.

    var currentImage = 0;
//get flicker images from rss.
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?id=42980910@N02&lang=en-us&format=json&jsoncallback=?", function(data) {
    $(data.items).each(function() {
        var item = this,
            title, description, thumbnail;
        title = item.title;
        description = item.description;
        thumbnail = item.media.m;
        if (currentImage % 3 === 0) {
            $("#apa").append("<p>HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH</p>");
        }
        currentImage++;
        $("#apa").append("<div id=\"div" + currentImage + "\" class=\"imageContainer pictDiv\"><img id=\"img" + currentImage + "\" class=\"bild pictImg\" src=\"" + thumbnail + "\" /></div>");
        $("#bakgrund").append("<img id=\"bkg" + currentImage + "\" class=\"bgrund pictBkg\" src=\"Bilder/polaroid.png\" />");
    });

    $("#bakgrund").append("<img id=\"bkg" + currentImage + "\" class=\"bgrund pictBkg\" src=\"Bilder/polaroid.png\" />");
});

This code works in Google Chrome. In Firefox it retrieves the data but don't do the append. If I try appending something else like simple text Firefox won't append that either.

It works when I'm trying it via jsfiddle.net but it doesn't when trying it via my own webpage.

Answer 1

You can do this without PHP, using JSONP:

$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?id=42980910@N02&lang=en-us&format=json&jsoncallback=?", function(data) {
        $(data.items).each(function() {
            var item = this, title, description, thumbnail;
            title = item.title;
            description = item.description;;
            thumbnail = item.media.m;
        });
    });

I made a jsFiddle demo.