Can someone update the Luis Borruel slideshow root code?
Posted: Tue Feb 19, 2008 5:17 am
hi, I was playing around with the Luis Borruel root code/slideshow tutorial that i found here :http://pbasewiki.srijith.net/howto/customising_rootgallery
I did everything the tutorial said, but when i uploaded everything, the slideshow is just a solid black square. Am i doing something wrong? I used both the CSS and HTML code that he provided.....HELP please. thanks!
this is what i am getting:http://www.pbase.com/arsharifyahoo
<SCRIPT language="JavaScript">
<!--
functions:
//Blending subroutine for pbase home page (C) Luis Borruel 2006
//www.cryer.co.uk © 2004 and http://www.brainerror.net ver 1.3 © June 7,2004
//were reference for the following Javascript slide show code
function changeOpac(opacity, id)
{
var object = document.getElementById(id).style;
object.opacity = (opacity / 100);
object.MozOpacity = (opacity / 101);
object.KhtmlOpacity = (opacity / 100);
object.filter = "alpha(opacity=" + opacity + ")";
}
var slideCache = new Array();
//the files to be shown
var imageFiles= "http://i.pbase.com/o4/83/618983/1/56552142.1.jpg;"+
"http://i.pbase.com/o4/83/618983/1/56552144.2.jpg;"+
"http://i.pbase.com/o4/83/618983/1/56552146.3.jpg;"+
"http://i.pbase.com/o4/83/618983/1/57154365.rovinj.jpg";
function blendimage(divid, imageid)
{
var transition_msecs = 1000; //fading time
var timer = 0;
var displaySecs = 5; //seconds for each picture
var speed = Math.round(transition_msecs / 100);
var imageSeparator = imageFiles.indexOf(";");
var nextImage = imageFiles.substring(0,imageSeparator);
//make image transparent
changeOpac(0, imageid);
//make new image
document.getElementById(imageid).src = nextImage;
//fade in image
for(i = 30; i <= 100; i+=5)
{
setTimeout("changeOpac(" + Math.round(Math.pow(i,2)*0.01) + ",'" + imageid + "')",(speed*timer));
timer+=5;
}
//fade out image
for(i = 100; i >= 0; i-=5)
{
setTimeout("changeOpac(" + Math.round(Math.pow(i,2)*0.01) + ",'" + imageid + "')",(speed*timer)+displaySecs*1000);
timer+=5;
}
//prepare next image
var futureImages= imageFiles.substring(imageSeparator+1,imageFiles.length)+ ';' + nextImage;
imageFiles = futureImages;
setTimeout("blendimage('"+divid+"','"+imageid+"')", (speed*timer)+displaySecs*1000);
imageSeparator = imageFiles.indexOf(";");
nextImage = futureImages.substring(0,imageSeparator);
//cache remaining files
if (slideCache[nextImage] == null)
{
slideCache[nextImage] = new Image;
slideCache[nextImage].src = nextImage;
}
}
-->
</script>
<br>
<br>
<CENTER>
<TABLE cellSpacing=0 cellPadding=0 width=800 border=0>
<TBODY>
<TR>
<TD align=left><IMG src="http://www.pbase.com/image/56552690/original.jpg" ></TD></TR>
<TR>
<TD><IMG height=8 src="http://www.pbase.com/image/56552555/original.jpg"></TD></TR>
<TR>
<TD vAlign=bottom colSpan=3><!--- menu starts here --->
<TABLE class=luis cellSpacing=0 cellPadding=0 width=800 border=0>
<TBODY>
<TR>
<TD><IMG height=10 src="http://www.pbase.com/image/56552555/original.jpg"></TD></TR>
<TR align=middle>
<TD><A href="http://www.pbase.com/nostromo/profile"><h3>Profile</h3></A></TD>
<TD><IMG src="http://www.pbase.com/image/56552555/original.jpg" width=8></TD>
<TD><A href="http://www.pbase.com/nostromo/guestbook"><h3>Guestbook</h3></A></TD>
<TD><IMG src="http://www.pbase.com/image/56552555/original.jpg" width=8></TD>
<TD><A href="http://www.pbase.com/nostromo/root&view=recent"><h3>Recent</h3></A></TD>
<TD><IMG src="http://www.pbase.com/image/56552555/original.jpg" width=8></TD>
<TD><A href='/nostromo#galerias'><h3>Galleries</h3>
</A></TD>
<TD><IMG src="http://www.pbase.com/image/56552555/original.jpg" width=8></TD>
<TD><A href="http://www.pbase.com/nostromo/spanish"><h3>Español</h3>
</A></TD></TR></TBODY></TABLE></TD></TR><!--- menu ends here --->
<TR>
<TD vAlign=top>
<div style='background-image: url("http://www.pbase.com/image/56552555/original.jpg"); background-repeat: no-repeat; width: 500px; height: 366px;' id="divid" class=display>
<IMG id='imgid' src="http://www.pbase.com/image/56552555/original.jpg"></div></TD>
<TD><IMG src="http://www.pbase.com/image/56552555/original.jpg" width=15></TD>
<TD vAlign=top bgColor=#333333><!--- right column --->
<TABLE cellSpacing=0 cellPadding=5 border=0>
<TBODY>
<TR>
<TD>
<P><br><br>Welcome to my gallery. My name is Luis Borruel and I have tried to put together the works I like most.
I could be called a travel photographer. Here you can find pictures of different parts of Spain and other countries.
<P>Comments and/or critics will be welcome, as well as the votes in the galleries you like.
That's the main way to make your work know inside pbase community. I would like also to thank so many people
who share their excellent works inside pbase, being a true source of inspiration and knowledge for many of us.
</TD></TR></TBODY></TABLE></TD><!--- end right column --->
</TR>
<TR>
<TD colSpan=5><IMG onload='javascript:blendimage("divid","imgid")' height=8 src="http://www.pbase.com/image/56552555/original.jpg"></TD></TR><!--- Elated credit http://www.elated.com --->
<TR>
<TD align=middle colSpan=5>
<P>Credits: ELATED PageKits, Ooochappan pbase webpage, http://www.cryer.co.uk and http://www.brainerror.net </P></TD></TR><!--- end elated credit---></TBODY></TABLE></CENTER>
<br>
<br>
<br>
<br>
<br>
<br>
<a name="galerias"></a>
I did everything the tutorial said, but when i uploaded everything, the slideshow is just a solid black square. Am i doing something wrong? I used both the CSS and HTML code that he provided.....HELP please. thanks!
this is what i am getting:http://www.pbase.com/arsharifyahoo
<SCRIPT language="JavaScript">
<!--
functions:
//Blending subroutine for pbase home page (C) Luis Borruel 2006
//www.cryer.co.uk © 2004 and http://www.brainerror.net ver 1.3 © June 7,2004
//were reference for the following Javascript slide show code
function changeOpac(opacity, id)
{
var object = document.getElementById(id).style;
object.opacity = (opacity / 100);
object.MozOpacity = (opacity / 101);
object.KhtmlOpacity = (opacity / 100);
object.filter = "alpha(opacity=" + opacity + ")";
}
var slideCache = new Array();
//the files to be shown
var imageFiles= "http://i.pbase.com/o4/83/618983/1/56552142.1.jpg;"+
"http://i.pbase.com/o4/83/618983/1/56552144.2.jpg;"+
"http://i.pbase.com/o4/83/618983/1/56552146.3.jpg;"+
"http://i.pbase.com/o4/83/618983/1/57154365.rovinj.jpg";
function blendimage(divid, imageid)
{
var transition_msecs = 1000; //fading time
var timer = 0;
var displaySecs = 5; //seconds for each picture
var speed = Math.round(transition_msecs / 100);
var imageSeparator = imageFiles.indexOf(";");
var nextImage = imageFiles.substring(0,imageSeparator);
//make image transparent
changeOpac(0, imageid);
//make new image
document.getElementById(imageid).src = nextImage;
//fade in image
for(i = 30; i <= 100; i+=5)
{
setTimeout("changeOpac(" + Math.round(Math.pow(i,2)*0.01) + ",'" + imageid + "')",(speed*timer));
timer+=5;
}
//fade out image
for(i = 100; i >= 0; i-=5)
{
setTimeout("changeOpac(" + Math.round(Math.pow(i,2)*0.01) + ",'" + imageid + "')",(speed*timer)+displaySecs*1000);
timer+=5;
}
//prepare next image
var futureImages= imageFiles.substring(imageSeparator+1,imageFiles.length)+ ';' + nextImage;
imageFiles = futureImages;
setTimeout("blendimage('"+divid+"','"+imageid+"')", (speed*timer)+displaySecs*1000);
imageSeparator = imageFiles.indexOf(";");
nextImage = futureImages.substring(0,imageSeparator);
//cache remaining files
if (slideCache[nextImage] == null)
{
slideCache[nextImage] = new Image;
slideCache[nextImage].src = nextImage;
}
}
-->
</script>
<br>
<br>
<CENTER>
<TABLE cellSpacing=0 cellPadding=0 width=800 border=0>
<TBODY>
<TR>
<TD align=left><IMG src="http://www.pbase.com/image/56552690/original.jpg" ></TD></TR>
<TR>
<TD><IMG height=8 src="http://www.pbase.com/image/56552555/original.jpg"></TD></TR>
<TR>
<TD vAlign=bottom colSpan=3><!--- menu starts here --->
<TABLE class=luis cellSpacing=0 cellPadding=0 width=800 border=0>
<TBODY>
<TR>
<TD><IMG height=10 src="http://www.pbase.com/image/56552555/original.jpg"></TD></TR>
<TR align=middle>
<TD><A href="http://www.pbase.com/nostromo/profile"><h3>Profile</h3></A></TD>
<TD><IMG src="http://www.pbase.com/image/56552555/original.jpg" width=8></TD>
<TD><A href="http://www.pbase.com/nostromo/guestbook"><h3>Guestbook</h3></A></TD>
<TD><IMG src="http://www.pbase.com/image/56552555/original.jpg" width=8></TD>
<TD><A href="http://www.pbase.com/nostromo/root&view=recent"><h3>Recent</h3></A></TD>
<TD><IMG src="http://www.pbase.com/image/56552555/original.jpg" width=8></TD>
<TD><A href='/nostromo#galerias'><h3>Galleries</h3>
</A></TD>
<TD><IMG src="http://www.pbase.com/image/56552555/original.jpg" width=8></TD>
<TD><A href="http://www.pbase.com/nostromo/spanish"><h3>Español</h3>
</A></TD></TR></TBODY></TABLE></TD></TR><!--- menu ends here --->
<TR>
<TD vAlign=top>
<div style='background-image: url("http://www.pbase.com/image/56552555/original.jpg"); background-repeat: no-repeat; width: 500px; height: 366px;' id="divid" class=display>
<IMG id='imgid' src="http://www.pbase.com/image/56552555/original.jpg"></div></TD>
<TD><IMG src="http://www.pbase.com/image/56552555/original.jpg" width=15></TD>
<TD vAlign=top bgColor=#333333><!--- right column --->
<TABLE cellSpacing=0 cellPadding=5 border=0>
<TBODY>
<TR>
<TD>
<P><br><br>Welcome to my gallery. My name is Luis Borruel and I have tried to put together the works I like most.
I could be called a travel photographer. Here you can find pictures of different parts of Spain and other countries.
<P>Comments and/or critics will be welcome, as well as the votes in the galleries you like.
That's the main way to make your work know inside pbase community. I would like also to thank so many people
who share their excellent works inside pbase, being a true source of inspiration and knowledge for many of us.
</TD></TR></TBODY></TABLE></TD><!--- end right column --->
</TR>
<TR>
<TD colSpan=5><IMG onload='javascript:blendimage("divid","imgid")' height=8 src="http://www.pbase.com/image/56552555/original.jpg"></TD></TR><!--- Elated credit http://www.elated.com --->
<TR>
<TD align=middle colSpan=5>
<P>Credits: ELATED PageKits, Ooochappan pbase webpage, http://www.cryer.co.uk and http://www.brainerror.net </P></TD></TR><!--- end elated credit---></TBODY></TABLE></CENTER>
<br>
<br>
<br>
<br>
<br>
<br>
<a name="galerias"></a>