Afficher l'image liée au flux rss / RSS Feeds Reader Plugin for jQuery

Version imprimable

Bonjour,

Je veux intégrer dans une page web un flux RSS à l'aide du plugin http://www.zazar.net/developers/jquery/zrssfeed/

J'ai opté pour l'option "RSS feed with images and ticker animation"

L'adresse du flux rss est http://www.courrierinternational.com...p/24/0/rss.xml. Chaque article comporte une image ou "Fichiers média"

Résultat:

Le titre l'article, la date, la description s'affichent:

RÉALITÉ VIRTUELLE • Bienvenue au musée de l'art volé
28/1/2015 10:51:51

Un tout nouveau genre de musée vient d'ouvrir ses portes : il propose à ses visiteurs de déambuler dans des galeries grâce à un casque de réalité virtuelle pour découvrir des œuvres d'art volées ou disparues.
Media files

Mais l'image associée à l'article ne s'affiche pas. A la place il y a la ligne suivante:

2701-MuseeVirtuel.jpg (image/jpg, 25.43 kb)

Pouvez vous m'aider a afficher l'image liée au flux rss?
Cordialement

Code page:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 <!DOCTYPE html> <html> <head> <link href="example_ticker.css" rel="stylesheet" type="text/css" /> </head> <body> <h2>Actualité culturelle</h2> <div id="ticker1"></div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> <script src="jquery.zrssfeed.min.js" type="text/javascript"></script> <script src="jquery.vticker.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { $('#ticker1').rssfeed('http://www.courrierinternational.com/rss/rp/24/0/rss.xml',{ snippet: false, linktarget: '_blank' }, function(e) { $(e).find('div.rssBody').vTicker({ showItems: 1 }); }); }); </script> </body> </html>

29/01/2015, 15h45
SpaceFrog

pour s'afficher, une image doit être une balise img ...

Merci

J'ai trouve un tuto intéressant pour importer les donnée rss (xml) http://pckult.developpez.com/tutorie...e-fichier-xml/

Le flux rss contient les données suivantes:

Code:

1
2
3
4
5
6
7
8
9
<item>
 <title>RÉALITÉ VIRTUELLE • Bienvenue au musée de l'art volé</title>
 <link>http://www.courrierinternational.com/article/2015/01/28/bienvenue-au-musee-de-l-art-vole</link>
 <description>Un tout nouveau genre de musée vient d'ouvrir ses portes : il propose à ses visiteurs de déambuler dans des galeries grâce à un casque de réalité virtuelle pour découvrir des œuvres d'art volées ou disparues.</description>
 <pubDate>Wed, 28 Jan 2015 10:51:51 +0100</pubDate>
 <dc:creator />
 <guid isPermaLink="true">http://www.courrierinternational.com/node/1205899</guid>
 <enclosure url="http://www.courrierinternational.com/files/imagecache/article_small2/2015/01/2701-MuseeVirtuel.jpg" length="26036" type="image/jpg" />
</item>

Le code de ma page:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html> <!--on declare au validator le langage utilisé-->
<html>
<head>
</head>
 
<body>
 
<div id="paragraphe1">
 
<h2>Actualité culturelle</h2>
 
	<div id="RSS"></div>
 
</div>
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(  
 function()
 {
   $.ajax( {
            type: "GET",
            url: "http://www.courrierinternational.com/rss/rp/24/0/rss.xml",
            dataType: "xml",
            success: function(xml) 
                     {
                       $(xml).find('item').each(   
                         function()
                         {
                            var title = $(this).find('title').text();
							var link = $(this).find('link').text();
							var description = $(this).find('description').text();
							var enclosure = $(this).find('enclosure').text();
 
                            $('<div class="infos"></div>').html('<a href="' + link + '">' + title + '</a><br><p>' + description + '</p><br><img src="' + enclosure + '/>').appendTo('#RSS');
 
                          });
                      }
        });
  }
);
 
</script>
 
</body>                                         
 
</html>

Ca ne marche pas. Pouvez vous m'éclairer?
Cordialement

Impossible de faire un get() sur le lien, j'ai l'erreur :

Citation:

No 'Access-Control-Allow-Origin' header is present on the requested resource.

Je peux juste copier-coller le XML. Sa structure est simple :

Code:

1
2
3
4
5
6
7
8
9
<item>
 <title>RÉALITÉ VIRTUELLE • Bienvenue au musée de l'art volé</title>
 <link>http://www.courrierinternational.com/article/2015/01/28/bienvenue-au-musee-de-l-art-vole</link>
 <description>Un tout nouveau genre de musée vient d'ouvrir ses portes : il propose à ses visiteurs de déambuler dans des galeries grâce à un casque de réalité virtuelle pour découvrir des œuvres d'art volées ou disparues.</description>
 <pubDate>Wed, 28 Jan 2015 10:51:51 +0100</pubDate>
 <dc:creator />
 <guid isPermaLink="true">http://www.courrierinternational.com/node/1205899</guid>
 <enclosure url="http://www.courrierinternational.com/files/imagecache/article_small2/2015/01/2701-MuseeVirtuel.jpg" length="26036" type="image/jpg" />
</item>

Pour l'image, vous devez prendre la valeur de l'attribut "url" du tag "enclosure".

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
$( function(){ // forme abrégée de $(document).ready(function(
 
    var jqXHR = $.get( "rss.xml" );
 
    setTimeout( function(){
        // Si l'objet différé existe dans l'état "attendre", 
        // alors exécute la méthode fail()
 
        if ( jqXHR && jqXHR.state() === "pending" ){
            jqXHR.abort();
        }
    }, 3000 ); // 3s
 
    jqXHR.done( function( data, textStatus, jqXHR ){
        // succès de la transaction, on doit traiter le contenu de data
        console.log( data, textStatus, jqXHR );
 
        var title, link, description, enclosureSrc;
 
        $( data ).find( 'item' ).each( function( i, item ){
            title = $( item ).find( 'title' ).text();
            link = $( item ).find('link' ).text();
            description = $( item ).find( 'description' ).text();
            enclosureSrc = $( item ).find( 'enclosure' ).attr( "url" );
 
            $( "<div/>", {
                "class" : "infos",
                "html" : '<a href="' + link + '">' +
                            title +
                            '</a><br/><p>' +
                                description +
                            '</p><br><img src="' +
                                enclosureSrc +
                            '"/>'
            }).appendTo( '#RSS' );
        });
 
    });
 
    jqXHR.fail( function( jqXHR, textStatus, errorThrown ){
        // échec de la transaction, gérer la catastrophe
        console.log( jqXHR, textStatus, errorThrown );
 
    });
 
    jqXHR.always( function( jqXHR, textStatus ){
        // la transaction est terminée
        console.log( jqXHR, textStatus );
 
    })
 
});

31/01/2015, 14h24
binco

Merci Daniel,

J'ai pas bien compris ...

Donc c'est pas possible de récupérer les infos xml sur ce site avec une ajax de type get?

J'ai essayé avec votre code js avec
var jqXHR = $.get( "http://www.courrierinternational.com/rss/rp/24/0/rss.xml" );
Ça ne marche pas
31/01/2015, 22h46
danielhagnoul

Question:

Citation:

Donc c'est pas possible de récupérer les infos xml sur ce site avec une ajax de type get?

Réponse, déjà donnée :

Citation:

Impossible de faire un get() sur le lien

Citation:

Je peux juste copier-coller le XML.
01/02/2015, 12h56
binco

ok merci

Existe il une autre méthode pour récupérer les infos xml?
03/02/2015, 12h55
binco

J'ai trouvé un tuto intéressant http://www.w3schools.com/php/php_ajax_rss_reader.asp (PHP Example - AJAX RSS Reader) pour faire la même chose en PHP

Merci