Feature: I convert RSS feed to Color label

We are so proud that we are able to introduce this brilliant feature to Pro Pack users. You can automatically insert all images from every RSS feed source into any Green / Red label widgets in Pro Pack by making a click.
There are numerous beautiful photo albums on internet and currently Google and Yahoo are providing excellent photo cloud services. However the problem is that there was no way to embed them into your site. (For sure, you were able to manually copy & paste each photo address to Pro Pack but this feauture will entirely skip those processes.)
This innovative function will completely remove the problem. Just grab a rss address from Google+ album, Picasa web album, Flickr photostream, and any other numerous RSS feed sources then paste into this tool inside the Pro Pack. It delivers not only photos from everywhere but also a lot of convenience and fun to you. In addition, you can save your time and effort. Experience this exclusive feature ONLY in Pro Pack!
+note: Especially for iWeb users, you can re-create various styled beautiful photo galleries / showcase widgets from your exisitng photo (album) page. For more information, please click iWeb icon from the right bar.
+tip: You can merge multiple RSS feed sources to single color label (green / red).
I am Label | I am Preview | Go back to Feature

* This is NOT a migration tool from your online photos. (Syncing from RSS feed to a widget is optional.)
* You can also sync Podcast (audio / video) or any RSS feed sources to the compatible widgets.
* After you convert a rss feed, you will get a keycode via "Save these contents" button. (in this demo version, you can not save to a color label.) This feature supports Green / Red (including thumbnails) label widgets.

iWeb Photo page
Google+ Album
Picasa Album
Flickr Photostream
Any RSS Feeds

RSS Feed to Green label converter (trial)

sync address feed limit link

feed generator user id album id

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.jcarousel.min.js"></script>
<script type="text/javascript" src="/js/jquery.thumbs.js"></script>

<style type="text/css" media="screen">
#container {
	/*widget_width*/width:908px;
	/*widget_height*/height:362px;
	/*frame_border_color*/border:1px solid #c8c8c8;
}

#container {-khtml-border-radius:4px; -ms-border-radius:4px; -o-border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px;overflow: hidden;padding: 0;margin: 0;}
div#text-holder {/*font_family*/font-family:Arial,Arial,Helvetica,sans-serif;/*font_size*/font-size:12px;left: 0;bottom: 0;background-color: rgba(0, 0, 0, 0.7);position: absolute;z-index: 999;color: white;text-align:center;vertical-align: middle;padding: 7px;display: none;white-space: -moz-pre-wrap;white-space: -pre-wrap;white-space: -o-pre-wrap;white-space: pre-wrap;word-wrap: break-word;}
#photonavi{/*navi_background_color*/background-color:#e8e8e8;height: 100%;float: left;padding: 10px;border-right: 1px solid #c8c8c8;}
.page li img {opacity: .7; -moz-opacity: .7; filter: alpha(opacity=70);}
.page li.active img {opacity: 1.0; -moz-opacity: 1.0; filter: alpha(opacity=100);}
.page li.active .thumb-container {cursor: default; border-color: red;}
#text-holder a,#text-holder a:link,#text-holder a:visited {outline: none;color: #fff;text-decoration: none;}
#text-holder a:hover,#text-holder a:active {text-decoration: underline;}
#photo-viewer {/*widget_background_color*/background-color:#000000;margin: 0;padding: 10px;overflow: hidden;position: relative;}
#photo-display {width: 100%;position: relative;margin: 0;padding: 0;overflow: hidden;}
#photo-display img {position: absolute;border: none;}
#photolists li img {border: none;}
.jcarousel-container-horizontal {width: 100%;height: 100%;margin: 0;padding: 0;}
.jcarousel-clip-horizontal {top: 0px;left: 0px;width: 100%;height: 100%;}
.thumb-container,.thumb-inner,.thumb-img {border: none;display: block;width: 100%;height: 100%;margin: 0;padding: 0;overflow: hidden;position: relative;}
.thumb-container {border: 1px solid transparent;padding: 0;}
.thumb-container a,.thumb-container img {border: none;margin: 0;padding: 0;}
.thumb-center img,.thumb-strip,.thumb-icon {margin: 0;padding: 0;border: none;position: absolute;}
.thumb-center img {border: none;margin: 0;padding: 0;}
#photo-display img,#photolists img {display: none;}
.page {width: 100%;height: 100%;list-style:none; margin: 0;padding: 0;}
.page li {float:left;}
#photonavi div {height:auto;}
.controller {text-align: center;width: 100%;margin-top: 10px;}
#page-controller {list-style: none;width: 100px;height: 23px;text-align: center;padding: 0;margin: 0;display: inline-block;font-family:Arial, Helvetica, sans-serif;font-size:12px;color: white;line-height: 23px;word-spacing:2px;}
#page-controller li {margin: 0;padding: 0;float: left;display: block;}
#page-controller li img{border: none;padding: 3px;cursor: pointer;}
#page-controller .left-corner {width: 22px;height: 100%;background: url('/images/page-controller/pagination_corner_left.png') no-repeat;}
#page-controller .center-corner {width: 56px;height: inherit;background: url('/images/page-controller/pagination_bkgd_middle.png') no-repeat;}
#page-controller .right-corner {width: 22px;height: inherit;background: url('/images/page-controller/pagination_corner_right.png') no-repeat;}
.page-arrow-disabled {cursor: default;opacity: .5;-moz-opacity: .5;filter: alpha(opacity=50);}
.loading{background-image:url('/images/loading-gray.gif');background-position:center;background-repeat:no-repeat;}
</style>
<!--[if IE]>
   <style type="text/css">
   #text-holder {background:transparent;-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000);zoom: 1;}
    </style>
<![endif]-->
<script type="text/javascript">
var thumb_dimension={/*var_thumb_width*/width:75,/*var_thumb_height*/height:75}; // thumbnail size
/*var_column*/var column=3; // the number of columns of thumbnails
/*var_autoplay*/var autoplay=true; // play slideshow when launched
/*var_pause_time*/var pause_time=7000; // time gap between animation

/* don't change this script line */
var viewer,textholder;var total_items=0;var timer=null;var total_page,current_page=1;var max_photo;function mycarousel_itemLoadCallback(b,a){if(a!="init"){return}var c=$("#photo-"+1).css({"z-index":total_items}).fadeIn(function(){$("#thumb-1").addClass("active");$(".page li").css({cursor:"pointer"}).bind("click",thumbclick);$(".active").css({cursor:"default"})}).attr("alt");if(c.length){textholder.html(c).show()}else{textholder.empty().hide()}if(autoplay&&total_items>1){timer=setTimeout(changecontent,pause_time)}$("#page-prev").bind("click",function(){prev(b)});$("#page-next").bind("click",function(){next(b)})}function next(a){stoptransition();a.next()}function prev(a){stoptransition();a.prev()}function thumbclick(b){stoptransition();if($(this).hasClass("active")){return false}$(".page li").css({cursor:"default"}).unbind("click");$(".active").removeClass("active");$("img",viewer).css({"z-index":0}).fadeOut();target_num=$(this).attr("id").split("-");var a=target_num[1];var c=$("#photo-"+a).css({"z-index":total_items}).fadeIn(function(){$("#thumb-"+a).addClass("active");$(".page li").css({cursor:"pointer"}).bind("click",thumbclick);$(".active").css({cursor:"default"})}).attr("alt");if(c.length){textholder.html(c).show()}else{textholder.empty().hide()}return false}function changecontent(){target_num=$(".active").attr("id").split("-");var a=target_num[1];a++;a=a>total_items?1:a;if(a==1){$("#photolists").jcarousel("scroll",1)}else{if(current_page>Math.ceil(a/max_photo)){$("#photolists").jcarousel("prev")}else{if(current_page<Math.ceil(a/max_photo)){$("#photolists").jcarousel("next")}}}$(".page li").css({cursor:"default"}).unbind("click");$(".active").removeClass("active");$("img",viewer).css({"z-index":0}).fadeOut();var b=$("#photo-"+a).css({"z-index":total_items}).fadeIn(function(){$("#thumb-"+a).addClass("active");$(".page li").css({cursor:"pointer"}).bind("click",thumbclick);$(".active").css({cursor:"default"});if(autoplay){timer=setTimeout(changecontent,pause_time)}}).attr("alt");if(b.length){textholder.html(b).show()}else{textholder.empty().hide()}}function stoptransition(){if(!autoplay){return}if(timer){clearTimeout(timer);$(":animated","#photo-display").stop(true,true)}autoplay=false;timer=null}function mycarousel_itemVisibleInCallbackAfterAnimation(d,b,a,c){current_page=d.index(a);$(".center-corner","#page-controller").html(current_page+" of "+total_page);if(total_page==1){return false}if(current_page==1){$("#page-prev").addClass("page-arrow-disabled").unbind("click").css({cursor:"default"});if($("#page-next").hasClass("page-arrow-disabled")){$("#page-next").removeClass("page-arrow-disabled").css({cursor:"pointer"}).bind("click",function(){next(d)})}}else{if(current_page==total_page){$("#page-next").addClass("page-arrow-disabled").unbind("click").css({cursor:"default"});if($("#page-prev").hasClass("page-arrow-disabled")){$("#page-prev").removeClass("page-arrow-disabled").css({cursor:"pointer"}).bind("click",function(){prev(d)})}}else{if($("#page-prev").hasClass("page-arrow-disabled")){$("#page-prev").removeClass("page-arrow-disabled").css({cursor:"pointer"}).bind("click",function(){prev(d)})}if($("#page-next").hasClass("page-arrow-disabled")){$("#page-next").removeClass("page-arrow-disabled").css({cursor:"pointer"}).bind("click",function(){next(d)})}}}}function launchphotogallerythumbgrid(){total_items=$("#photolists li").size();viewer=$("#photo-display");textholder=$("#text-holder");var p=thumb_dimension.width+2;var b=thumb_dimension.height+2;var c=p*column;if(c<100){c=100;var a=c-p;$("#photolists li").css({"margin-left":Math.floor(a/2)+"px","margin-right":Math.ceil(a/2)+"px"})}var l=$("#container").height()-(parseInt($("#photonavi").css("padding-top"),10)*2)-33;var n=Math.floor(l/b);max_photo=n*column;total_page=Math.ceil(total_items/max_photo);var f=$("#container").height()-parseInt($("#photo-viewer").css("padding-top"),10)*2;$("#photonavi").css("width",c+"px");$("#photo-viewer").css("height",f+"px");textholder.css("width",$("#photo-viewer").width()+parseInt($("#photo-viewer").css("padding-right"),10)*2-parseInt(textholder.css("padding-right"),10)*2+"px");var m=$("#photo-viewer").width();var g=f;var k=Math.max(m,g);var e=Math.max(thumb_dimension.width,thumb_dimension.height);$("#photo-display").css({height:g+"px"});var j=document.createElement("style");var d="#photolists>li, .jcarousel-item-horizontal,.jcarousel-item-placeholder-horizontal {width: "+c+"px;height: "+l+"px;} ";d+=".thumb-container {width: "+thumb_dimension.width+"px; height: "+thumb_dimension.height+"px;}";j.setAttribute("type","text/css");if(j.styleSheet){j.styleSheet.cssText=d}else{var o=document.createTextNode(d);j.appendChild(o)}for(var h=1;h<=total_page;h++){$("#photolists").append('<li><ul class="page" id="page-'+h.toString()+'"></ul></li>')}document.getElementsByTagName("head")[0].appendChild(j);$("#photolists li img").each(function(s){var t=e_width=$(this).width();var q=e_height=$(this).height();var r="thumb-"+(s+1).toString();if(t>m){e_width=m;e_height=Math.round((q*e_width)/t);if(e_height>g){e_height=g;e_width=Math.round((t*e_height)/q)}}else{if(q>g){e_height=g;e_width=Math.round((t*e_height)/q);if(e_width>m){e_width=m;e_height=Math.round((q*e_width)/t)}}}viewer.append('<img id="photo-'+(s+1).toString()+'" src="'+$(this).attr("src")+'" alt="'+$(this).attr("alt")+'" style="z-index: 0; width:'+e_width+"px; height:"+e_height+"px;top:"+Math.floor((g-e_height)/2)+"px; left:"+Math.floor((m-e_width)/2)+'px;" />');if(t>=q){$(this).attr({width:Math.round((t*e)/q),height:e})}else{$(this).attr({width:e,height:Math.round((q*e)/t)})}$(this).parents("li").attr("id",r).appendTo("#page-"+(Math.ceil((s+1)/max_photo)));$(this).addClass("thumb").thumbs().show()});$(".center-corner","#page-controller").html("1 of "+total_page);if(total_page==1){$("#page-prev").addClass("page-arrow-disabled").unbind("click").css({cursor:"default"});$("#page-next").addClass("page-arrow-disabled").unbind("click").css({cursor:"default"})}$("#photolists").jcarousel({visible:1,size:total_page,animation:0,scroll:1,buttonNextHTML:null,buttonPrevHTML:null,itemLoadCallback:mycarousel_itemLoadCallback,itemVisibleInCallback:{onAfterAnimation:mycarousel_itemVisibleInCallbackAfterAnimation}})}function loadfeedsource(r,n,t){return $(this).each(function(f){var b=$(f);var d="http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&callback=?&q="+encodeURIComponent(r)+"&output=json_xml&num="+n;$.getJSON(d,function(e){if(e.responseStatus==200){getmediafromfeed(e.responseData,{type:t,source:r})}else{$("#container").removeClass("loading");launchphotogallerythumbgrid()}})})}function getimagefromfeed(l){var m=null;var g="";var b=document.createElement("div");b.style.position="absolute";b.style.visibility="hidden";b.innerHTML=l;function j(e){return e.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">")}function k(p){if(p.textContent){return p.textContent}if(p.innerText){return p.innerText}var e="";if(p.nodeType==1){var o=p.childNodes;for(var n=0;n<o.length;++n){e=e+k(o[n])}}else{if(p.nodeType==3){return p.nodeValue}}return e}try{function h(o,n){var e="";if(o){for(var p=0,q=o.length;p<q;p++){e+=a(o[p],n)}}return e}function a(p,i){var e="";if(p.nodeType==3){if(p.nodeValue){e+=j(p.nodeValue)}}else{if(p.nodeType==1){var o=p.childNodes;var n=p.tagName;n=n?n.toLowerCase():"";if(n=="a"){e+='<a href="'+p.getAttribute("href")+'" target="_blank">';e+=h(o,true);e+="</a>"}else{if(n=="img"&&i){e+=p.getAttribute("alt")||""}else{if(n=="b"||n=="i"||n=="s"||n=="u"){e+="<"+n+">";e+=h(o,i);e+="</"+n+">"}else{if(n=="p"){e+=h(o,i)}else{if(n=="br"){}else{e+=h(o,i)}}}}}}}return e}g=a(b,false)}catch(f){g=k(b)}var d=$("img",b);if(d&&d.length>0){m=$(d).attr("src")}return{content:g,inlineImages:m}}var getmediafromfeed=function(f,p){if(b=f.feed){if(p.type==0){p.source=p.source.substr(0,p.source.lastIndexOf("/"));}var d=0;var j=0;var m=[];var n=f.xmlString;"Microsoft Internet Explorer"==navigator.appName?(d=new ActiveXObject("Microsoft.XMLDOM"),d.async="false",d.loadXML(n)):d=(new DOMParser).parseFromString(n,"text/xml");n=d.getElementsByTagName("item");for(var i=0;i<b.entries.length;i++){d=i;var c="";var g=b.entries[i],k=g.link;if(0<n.length&&((k=$(n[i]).find("media\\:content,content"),0<k.length) || (k=$(n[i]).find("enclosure"),0<k.length))){if((/image/i).test(k[0].getAttribute("type"))){c=k[0].getAttribute("url")}}else{c=getimagefromfeed(g.content).inlineImages;}if(c){if(p.type==0&&c.search(p.source)!= 0){t_path=c.split('/');c=p.source+"/"+t_path[t_path.length-3]+"/"+t_path[t_path.length-2]+"/"+t_path[t_path.length-1];}m.push({image:c,title:(p.type==1?g.content.replace(/["]/g, "'"):g.title.replace(/["]/g, "'")),link:g.link})}}$('#photolists').empty();/*var_include_link*/var include_link=true;/*var_window_open*/var window_open="_blank";for (var i=0;i<m.length;i++){$('#photolists').append('<li><img alt="'+(m[i].link&&include_link&&m[i].title?'<a href=\''+m[i].link+'\' target=\''+window_open+'\'>':'')+m[i].title+(m[i].link&&include_link&&m[i].title?'</a>':'')+'" /></li>');var handle=$('#photolists li:eq('+i+') img');handle.load(function(){$(this).attr({width:$(this).width(),height:$(this).height()});j++;if (j==m.length){$("#container").removeClass("loading");launchphotogallerythumbgrid()}}).error(function(){j++});handle.attr('src',m[i].image)}}};$(document).ready(function(){if(/*var_sync_rssfeed*/false){$("#container").addClass("loading");loadfeedsource(/*var_rssfeed_url*/"",/*var_rssfeed_limit*/10,/*var_feed_generator*/1)}else{launchphotogallerythumbgrid()}});
</script>
</head>
<body style="background: transparent; margin: 0pt;">
<div id="container"><div id="photonavi"><div><ul id="photolists" style="list-style:none; margin: 0;padding: 0;">
<!--begin to insert contents-->

<!--end to insert contents-->
</ul></div><div class="controller"><ul id="page-controller"><li class="left-corner"><img id="page-prev" src="/images/page-controller/pagination_arrow_left.png" /></li><li class="center-corner"></li><li class="right-corner"><img id="page-next" src="/images/page-controller/pagination_arrow_right.png" /></li></ul>
</div></div><div id="photo-viewer"><div id="photo-display"></div><div id="text-holder"></div></div></div>
</body>
</html>

I am Preview

This live demo is dynamically loaded when you push "Convert" button.

* Important! This preview is from "Photo Gallery with thumb-Grid" widget with your contents. You can also apply this function to other widgets in Green / Red label.