Go Back   CodingForums.com > :: Client side development > HTML & CSS

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 07-15-2011, 07:32 PM   PM User | #1
jackieayres
New to the CF scene

 
Join Date: Jul 2011
Posts: 1
Thanks: 0
Thanked 0 Times in 0 Posts
jackieayres is an unknown quantity at this point
Can't figure this out! URGENT.

Hey guys,

I'm trying to load this code on a blogger template. When I add it directly as a widget, it will load fine. But the widget will limit the size to 800px wide. I need 990px wide.

I'm adding my feed correctly (the same as I add on the widget -a picasa album feed). But it only shows as "Loading pictures..."

This is the original:

Code:
<textarea name="comments" cols="80" rows="25" scrolling="yes">
<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="Slideshow from Picasa Media RSS Feed for Blogger"
title_url="http://viti-vino.blogspot.com"
height="300"
width="220"
scrolling="false"
directory_title="Slideshow from Picasa for Blogger."
description="Media RSS Feed Slideshow for Blogger. Simple Slideshow (without title of Feed and without title of pictures). Can display the original picture. Can define display and transition time. Display jpg, gif and png pictures. Random order available."
screenshot="http://www.liens-du-vin.ch/_pic062/picasa-slideshow-screen.png"
thumbnail="http://www.liens-du-vin.ch/_pic062/picasa-slideshow-thumb.png"
author="Philippe Chappuis"
author_email="info+gadgetCSE@liens-du-vin.ch"
author_affiliation="Google"
author_location="Rolle Switzerland"
author_link="http://www.liens-du-vin.ch"
author_photo="http://www.liens-du-vin.ch/_pic02/gadget-author-photo.png"
author_aboutme="An Engineer who likes to develop for the Net and tastes wines"
author_quote="A chief is a man who assumes responsibility. He says &quot;I was beaten&quot; he does not say &quot;My men were beaten&quot; - Antoine de Saint-Exupery">

<Require feature="dynamic-height" /> 
<Require feature="opensocial-0.8" /> 
<Require feature="google.blog" /> 
<Require feature="skins" /> 
<Require feature="views" /> 
<Require feature="analytics" />

</ModulePrefs>

<UserPref name="FEED" display_name="Feed to display" required="true" default_value="http://picasaweb.google.fr/data/feed/base/user/philippe.chappuis/albumid/5297196325809923457?alt=rss&amp;kind=photo&amp;hl=en" />

<UserPref name="PWH" display_name="Width of pictures" required="true" default_value="280" />
<UserPref name="PHT" display_name="Height of pictures" required="true" default_value="190" />

<UserPref name="DTime" display_name="Display Time (ms)" required="false" />
<UserPref name="TTime" display_name="Transition Time (ms)" required="false" />
<UserPref name="RND" display_name="Random display (Yes - No)" required="false" />
<UserPref name="CLP" display_name="Open Picture on Clic (Yes - No)" required="false" />
<UserPref name="NAB" display_name="Display Navigation Bar (Yes - No)" required="false" />

<UserPref name="SCOL" display_name="Background of Slide" required="false" />
<UserPref name="BCOL" display_name="Color of Border" required="true" default_value="#f00" />

<Content type="html"><![CDATA[
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script src="http://www.google.com/uds/solutions/slideshow/gfslideshow.js" type="text/javascript"></script>

<style text="text/css">

body
{
background-color: transparent;
}

#slide_box
{
width: __UP_PWH__px;
height: __UP_PHT__px;
margin: 0;
border: 2px solid __UP_BCOL__;
padding: 4px;
}

#slide_box a img
{
border: 0;
}

#feed_title
{
display: none;
}
</style>

<center><div id="feed_title"></div><div id="slide_box">Loading pictures...</div></center>

<script type="text/javascript">

// Global variables

var prefs = new gadgets.Prefs();

var s_fil = prefs.getString("FEED");

var dti="4000";
var s_dti = prefs.getString("DTime");
if (s_dti)
{
if ((s_dti < 1000) | (s_dti > 12000)) dti="4000";
dti=s_dti;
}

var tti="2000";
var s_tti = prefs.getString("TTime");
if (s_tti)
{
if ((s_tti < 500) | (s_tti > 6000)) tti="2000";
tti=s_tti;
}

var rnd="N";
var s_rnd = prefs.getString("RND");
if (s_rnd)
{
s_rnd=s_rnd.toUpperCase();
if (s_rnd.substr(0,1) == 'N')
   {rnd="N";}
else
   {rnd="Y";}
}

var clp=null;
var s_clp = prefs.getString("CLP");
if (s_clp)
{
s_clp=s_clp.toUpperCase();
if (s_clp.substr(0,1) == 'N')
   {clp=null;}
else
   {clp="_blank";}
}

// navbar

var nab=true;
var s_nab = prefs.getString("NAB");
if (s_nab)
{
s_nab=s_nab.toUpperCase();
if (s_nab.substr(0,1) == 'N')
   {nab=null;}
else
   {nab=true;}
}

// text and link

var scol ="";
var s_scol = prefs.getString("SCOL");
if (s_scol)
   {scol=s_scol;}
else
   {scol="transparent";}

document.getElementById("slide_box").style.backgroundColor = scol;

function load_feed()
{
var feed_input = s_fil;

var options = {
fullControlPanel: nab,
fullControlPanelSmallIcons: nab,
fullControlPanelFadeOutTime: 1000,
pauseOnHover: false,
scaleImages : true,
displayTime: dti,
numResults: 1000,
transitionTime: tti,
linkTarget: clp,
feedLoadCallback: FeedTitle,
thumbnailUrlResolver: UrlResolver, 
transitionCallback: TransitionHandler
};


if (rnd != "N") /* Random call */
{
  var processEntries = GFslideShow.prototype.processEntries;
    GFslideShow.prototype.processEntries =
      function(entries) {
        for (var i=0, entry;  entry = entries[i];  i++) {
          var j = Math.floor(Math.random() * entries.length);
          var t = entries[j];
          entries[j] = entries[i];
          entries[i] = t;
        }
        processEntries.call(this, entries);
      };
 } 


new GFslideShow(feed_input, "slide_box", options);
}

// Find the title of the Feed

function FeedTitle(result)
{ if ( result.error ) { alert("Error : " + result.error.mesage); }
else
{document.getElementById("feed_title").innerHTML=" "; }
}

// Find title of pic

function TransitionHandler(entry, transitionTime)
{

}

// Get the full size (picasa send thumb from s288 (288 x 216) 

function UrlResolver (entry)
{

var c=entry.content; 
var s1 = c.indexOf("src=")+5;

var i = c.toUpperCase().indexOf(".jpg".toUpperCase(),s1); 
if (i==-1) {i=c.toUpperCase().indexOf(".gif".toUpperCase(),s1);}  
if (i==-1) {i=c.toUpperCase().indexOf(".png".toUpperCase(),s1);} 

var s2 = i + 4;  
var thumb= c.substring(s1,s2); 

// take the picture from s800
  
thumb=thumb.replace("/s288/","/s800/");
return(thumb);    
}        
  
google.load("feeds", "1");
google.setOnLoadCallback(load_feed);
_IG_Analytics("UA-442758-35", "/gg_b_slide");  

</script>

]]></Content>
</Module>
</textarea>


This is the one I'm using
<textarea name="comments" cols="80" rows="25" scrolling="yes">

<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="Slideshow from Picasa Media RSS Feed for Blogger"
title_url="http://viti-vino.blogspot.com"
height="300"
width="220"
scrolling="false"
directory_title="Slideshow from Picasa for Blogger."
description="Media RSS Feed Slideshow for Blogger. Simple Slideshow (without title of Feed and without title of pictures). Can display the original picture. Can define display and transition time. Display jpg, gif and png pictures. Random order available."
screenshot="http://www.liens-du-vin.ch/_pic062/picasa-slideshow-screen.png"
thumbnail="http://www.liens-du-vin.ch/_pic062/picasa-slideshow-thumb.png"
author="Philippe Chappuis"
author_email="info+gadgetCSE@liens-du-vin.ch"
author_affiliation="Google"
author_location="Rolle Switzerland"
author_link="http://www.liens-du-vin.ch"
author_photo="http://www.liens-du-vin.ch/_pic02/gadget-author-photo.png"
author_aboutme="An Engineer who likes to develop for the Net and tastes wines"
author_quote="A chief is a man who assumes responsibility. He says &quot;I was beaten&quot; he does not say &quot;My men were beaten&quot; - Antoine de Saint-Exupery">

<Require feature="dynamic-height" /> 
<Require feature="opensocial-0.8" /> 
<Require feature="google.blog" /> 
<Require feature="skins" /> 
<Require feature="views" /> 
<Require feature="analytics" />

</ModulePrefs>

<UserPref name="FEED" display_name="https://picasaweb.google.com/data/feed/base/user/JackieAyresNY/albumid/5488630219503141857?alt=rss&kind=photo&hl=en_US" required="true" default_value="https://picasaweb.google.com/data/feed/base/user/JackieAyresNY/albumid/5488630219503141857?alt=rss&kind=photo&hl=en_US" />

<UserPref name="PWH" display_name="990" required="true" default_value="990" />
<UserPref name="PHT" display_name="200" required="true" default_value="200" />

<UserPref name="DTime" display_name="3000" required="false" />
<UserPref name="TTime" display_name="2000" required="false" />
<UserPref name="RND" display_name="Yes" required="false" />
<UserPref name="CLP" display_name="No" required="false" />
<UserPref name="NAB" display_name="No" required="false" />

<UserPref name="SCOL" display_name="transparent" required="false" />
<UserPref name="BCOL" display_name="#ffffff" required="true" default_value="#fffffff" />

<Content type="html"><![CDATA[
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script src="http://www.google.com/uds/solutions/slideshow/gfslideshow.js" type="text/javascript"></script>

<style text="text/css">

body
{
background-color: transparent;
}

#slide_box
{
width: 995px;
height: 205px;
margin: 0;
border: 0px solid #ffffff;
padding: 0px;
}

#slide_box a img
{
border: 0;
}

#feed_title
{
display: none;
}
</style>

<center><div id="feed_title"></div><div id="slide_box">Loading pictures...</div></center>

<script type="text/javascript">

// Global variables

var prefs = new gadgets.Prefs();

var s_fil = prefs.getString("FEED");

var dti="4000";
var s_dti = prefs.getString("DTime");
if (s_dti)
{
if ((s_dti < 1000) | (s_dti > 12000)) dti="4000";
dti=s_dti;
}

var tti="2000";
var s_tti = prefs.getString("TTime");
if (s_tti)
{
if ((s_tti < 500) | (s_tti > 6000)) tti="2000";
tti=s_tti;
}

var rnd="N";
var s_rnd = prefs.getString("RND");
if (s_rnd)
{
s_rnd=s_rnd.toUpperCase();
if (s_rnd.substr(0,1) == 'N')
   {rnd="N";}
else
   {rnd="Y";}
}

var clp=null;
var s_clp = prefs.getString("CLP");
if (s_clp)
{
s_clp=s_clp.toUpperCase();
if (s_clp.substr(0,1) == 'N')
   {clp=null;}
else
   {clp="_blank";}
}

// navbar

var nab=true;
var s_nab = prefs.getString("NAB");
if (s_nab)
{
s_nab=s_nab.toUpperCase();
if (s_nab.substr(0,1) == 'N')
   {nab=null;}
else
   {nab=true;}
}

// text and link

var scol ="";
var s_scol = prefs.getString("SCOL");
if (s_scol)
   {scol=s_scol;}
else
   {scol="transparent";}

document.getElementById("slide_box").style.backgroundColor = scol;

function load_feed()
{
var feed_input = s_fil;

var options = {
fullControlPanel: nab,
fullControlPanelSmallIcons: nab,
fullControlPanelFadeOutTime: 1000,
pauseOnHover: false,
scaleImages : true,
displayTime: dti,
numResults: 1000,
transitionTime: tti,
linkTarget: clp,
feedLoadCallback: FeedTitle,
thumbnailUrlResolver: UrlResolver, 
transitionCallback: TransitionHandler
};


if (rnd != "N") /* Random call */
{
  var processEntries = GFslideShow.prototype.processEntries;
    GFslideShow.prototype.processEntries =
      function(entries) {
        for (var i=0, entry;  entry = entries[i];  i++) {
          var j = Math.floor(Math.random() * entries.length);
          var t = entries[j];
          entries[j] = entries[i];
          entries[i] = t;
        }
        processEntries.call(this, entries);
      };
 } 


new GFslideShow(feed_input, "slide_box", options);
}

// Find the title of the Feed

function FeedTitle(result)
{ if ( result.error ) { alert("Error : " + result.error.mesage); }
else
{document.getElementById("feed_title").innerHTML=" "; }
}

// Find title of pic

function TransitionHandler(entry, transitionTime)
{

}

// Get the full size (picasa send thumb from s288 (288 x 216) 

function UrlResolver (entry)
{

var c=entry.content; 
var s1 = c.indexOf("src=")+5;

var i = c.toUpperCase().indexOf(".jpg".toUpperCase(),s1); 
if (i==-1) {i=c.toUpperCase().indexOf(".gif".toUpperCase(),s1);}  
if (i==-1) {i=c.toUpperCase().indexOf(".png".toUpperCase(),s1);} 

var s2 = i + 4;  
var thumb= c.substring(s1,s2); 

// take the picture from s800
  
thumb=thumb.replace("/s288/","/s800/");
return(thumb);    
}        
  
google.load("feeds", "1");
google.setOnLoadCallback(load_feed);
_IG_Analytics("UA-442758-35", "/gg_b_slide");  

</script>

]]></Content>
</Module>
</textarea>

It's for this blog: http://julyann-template.blogspot.com/
On the top is a different code (that I'm trying to get rid of)
The second slideshow, is using the add on, coming from the picasa album feed.
The one in the bottom (showing "Loading pictures...) is from the code above and the same picasa album feed, only added via HTML box.
Bit thanks!
Jackie

Last edited by Apostropartheid; 07-15-2011 at 09:45 PM..
jackieayres is offline   Reply With Quote
Reply

Bookmarks

Tags
blogger, code, slideshow

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 08:48 PM.


Advertisement
Log in to turn off these ads.