make the image bigger

css/style.css

@@ -1,7 +1,7 @@
 body {
   /*background-image: url(../images/bg01.jpg);*/
   background-color: #0576dc;
-  text-shadow: 0px 1px 1px #111;
+  /*text-shadow: 0px 1px 1px #111;*/
   color: #fff;
   font-family: "Lucida Grande";
   overflow: hidden;
@@ -14,7 +14,7 @@ a {
 
 #container {
   margin: 0 auto;
-  width: 70%;
+  width: 80%;
   margin-top: 6%;
   position: relative;
 }
@@ -28,7 +28,24 @@ article {
 }
 
 article img {
-  float: left;
+  display: block;
+  width: 50%;
+  margin: 0 auto;
+  padding-bottom: 20px;
+  border: none;
+  z-index: -1;
+  -webkit-box-reflect: below 1px 
+  -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.8, transparent), to(white));
+}
+
+.content {
+  text-shadow: 0px 1px 1px #111;
+  z-index: 100;
+}
+
+article .from {
+  position: absolute;
+  margin-bottom: -100px;
 }
 
 .hide {

index.html

@@ -13,9 +13,9 @@
       <div id="main" role="main">
         
         <article id="a1">
-          <span class="from"></span>
-          <h2></h2>
-          <div class="content"></div>
+          <span class="from">SS</span>
+          <h2>YYY</h2>
+          <div class="content">ZZZ</div>
         </article>
         
         <article id="a2" class="hide">

js/main.js

@@ -28,7 +28,7 @@ function Feeds() {
   this.fetch = function(feedUrl, callback) {
     var _this = this;
     var feed = new google.feeds.Feed(feedUrl);
-    feed.setNumEntries(50);
+    feed.setNumEntries(1);
     feed.includeHistoricalEntries();
     feed.load(function(result) {
       if (!result.error) {
@@ -73,6 +73,7 @@ function RSSVisualizer() {
   
   this.playRSS = function() {
     if (this.entries.length == 0) return;
+    if (this._lastIndex == this.entries.length) this._lastIndex = 0;
     var e = this.entries[this._lastIndex++];
     $(this.lastShow).addClass("hide");
     var thisShow = (this.lastShow == "#a1" ? "#a2" : "#a1");
@@ -83,15 +84,21 @@ function RSSVisualizer() {
   this.showSingle = function(container, entry) {
     $(container).children(".from").text(entry.feed_title);
     $(container).children("h2").text(entry.title);
-    $(container).children(".content").html(entry);
+    $(container).children(".content").html(this.renderContent(entry));
     $(container).removeClass("hide");
   };
   
   this.renderContent = function(entry) {
     if (entry.feed_title == "Hacker News") {
       return "";
+    } 
+    var regexp_img = /<img [^>]+>/ig;
+    var matched = entry.content.match(regexp_img);
+    var img = "";
+    if (matched) {
+      img = matched[0];
     }
-    return entry.content.substring(0, 250) + "...";
+    return img + entry.content.replace(/<[^>]+>/img, '');
   }
   
   

test/unittest.html

@@ -49,6 +49,7 @@ test("should fetch feeds", function() {
   });
 });
 
+
   });
   </script>