Show image in JavaScript

Question

I got a litlle js code that is showing me updates from a feed

google.load("feeds", "1");

function initialize() {
  var feed = new google.feeds.Feed("http://google.com/");
  feed.setNumEntries(1);
  var count = 1;
  feed.load(function(result) {
    if (!result.error) {
      var container = document.getElementById("feed");
      var html = "";
      for (var i = 0; i < result.feed.entries.length; i++) {
        var entry = result.feed.entries[i];
        html = "<h5>" + count++ + ". <a href='" + entry.link + "'>" + entry.title + "</a></h5>";
        var div = document.createElement("div");
        div.innerHTML = html;
        container.appendChild(div);            
      }
      document.write(html);
    }
  });
}
google.setOnLoadCallback(initialize);

What i want to do is to show the first image from the posts from the feed. i would also like to have the title so entry.title and entry.content

OK, so is this a request for some code to be written for you or is there a problem that needs to be solved? — iConnor, Jun 07 '13 at 19:50
i need some code to change from showing me the title of the posts to showing me the image contained in the posts from the feed. the code works correnctly but i only get the title — kuse, Jun 07 '13 at 19:58

score 0 · Answer 1 · answered Jun 07 '13 at 20:01

Even though parsing html with regx is big dodo, I will still advise you this, parse your content html with /<img\s+src\s*=\s*(["'][^"']+["']|[^>]+)>/

Or a lazy way is to have a hidden div and do this

var temp = document.createElement( 'div' );
temp.innerHTML = html_str;

var images = temp.getElementsByTagName( 'img' );

score 0 · Answer 2 · edited May 23 '17 at 12:18

0

First, you must use entry.content instead of entry.title in order to get the full HTML content of the entry. You may have something like this:

var content = entry.content;
var imgArray = content.match( /<img\s+src\s*=\s*(["'][^"']+["']|[^>]+)>/ );
// imgArray[0] would contain the first image (more likely the one that better describe the post)

P.S.: I didn't steal this Regex from actual answer, but it seems that we've got to the same reference for it :-)

UPDATE: Then, to display it in a container, I would advise you to dynamically create DOM elements to gain more control over it, and in which you will be able to easily associate a value. Something like this:

var dom_h5 = document.createElement('h5');

var dom_entryTitle = document.createElement('div');
dom_entryTitle.className = 'title-classname';
dom_entryTitle.innerHTML = entry.title;
dom_h5.appendChild(dom_entryTitle);

container.appendChild(dom_h5);

To simplify the image part, you could create a separate div and inject the image tag as his innerHTML.

This may help you:

Web API Reference - document.createElement

edited May 23 '17 at 12:18

Community

1
1

answered Jun 07 '13 at 20:16

Frederik.L

5,522
2
29
41

actually i got the idea better from your post and hi managed to get my script to work correctly, thank you so much. I know have to do some css/html work to display the image more like a slideshow. thanks again – kuse Jun 07 '13 at 20:24
i need some help adding the title of the post also, where and how should i add the entry.title ? i have been adding right beside the entry.content but with no sucess – kuse Jun 07 '13 at 20:46
If the problem lacks some information, please add it directly to the question so that we can provide complete answers. Should I remind that StackOverflow is Q&A oriented and we basically answer to specific questions. Please post all the relevant code and show what you tried so far then we'll help you from this point :-) – Frederik.L Jun 07 '13 at 20:50
I edited my answer, you're not so far from a working solution, keep it up :-) – Frederik.L Jun 08 '13 at 03:06

Show image in JavaScript

2 Answers2