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

**binco** · 29/01/2015, 15h39

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**SpaceFrog** · 29/01/2015, 15h45

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

**binco** · 30/01/2015, 18h17

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**danielhagnoul** · 31/01/2015, 00h39

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

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

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

Code XML :

Sélectionner tout - Visualiser dans une fenêtre à part

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 JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

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 );
 
    })
 
});

**binco** · 31/01/2015, 14h24

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

**danielhagnoul** · 31/01/2015, 22h46

Question:

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 :

Impossible de faire un get() sur le lien

Je peux juste copier-coller le XML.

**binco** · 01/02/2015, 12h56

ok merci

Existe il une autre méthode pour récupérer les infos xml?

**binco** · 03/02/2015, 12h55

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

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

jQuery

Discussions similaires

Partager

Partager