Slideshow Script Error
Madasafish
Aylesbury (UK)
I have a slideshow script which I have used on my website, I have copied it from a tutorial which I found.
The main script file is a xls file which holds all the commands for which it seems to calculate the size of the image and then displays it.
It also uses and xml file which is linked to the xls and this files stores the
image files and captions for the photo's.
The slideshow usually works like a treat but occassionally it display this message. "ups height is too large for image" this line is in the xls script file along with "ups width is too large for image" the width message has never appeared it just seems to be the height error.
I don't have enough knowledge to sort this out, does anyone know why this is happens? when this error occurs if I clear my history and cache down and then go back into my website it works ok.
Here is the script below:
[php]
<?xml version="1.0"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:output method="html"/>
<xsl:template match="/">
<html>
<head>
<title>Photo Gallery: <xsl:value-of select="PhotoGallery/Name"/></title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252"/>
<meta name="GENERATOR" content="XSL Stylesheet Generated"/>
<meta author="Michael Suodenjoki"/>
<style text="stylesheet">
body
{
font-family: "Comic Sans MS", "Helvetica";
font-size: 10pt;
color: white;
background-color: black;
}
table
{
font-size: 9pt;
}
.photocontainer
{
visibility:hidden;
position:absolute;
top:75px;
width:100%;
height:100%;
text-align: center;
}
.transitioncontainer
{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
filter:progid:DXImageTransform.Microsoft.Fade(duration=1,overlap=1.0);
}
.phototable
{
border: 0;
}
.celltext
{
color: rgb(200,240,200);
}
</style>
</head>
<script language="javascript">
// Note: Don't use CDATA here. This script code used XSL.
var currImageNo = 1; // Specifies the current selected photo.
var timerId; // Used as timer identifier for DHTML setInterval/clearInterval.
//
// 'prevImage'
//
// Select previous image. If current image is 1 the previous
// image will be set (by selectImage) to the last image in the
// gallery.
//
function prevImage()
{
selectImage(currImageNo,-1);
}
//
// 'nextImage'
//
// Selects next image.
//
function nextImage()
{
selectImage(currImageNo,+1);
}
//
// 'selectImage'
//
// This function selects a new imaged based on the current (old) image
// and an increment (+1,-1) telling which next new image number to show.
//
// The function wraps the increment around depending on the number
// of photos in the gallery.
//
function selectImage( imgNumber, incr )
{
// Calculate the new image number to show (the old is keept in imgNumber parameter)
currImageNo = currImageNo + incr;
if( currImageNo == 0 )
{
currImageNo = <xsl:value-of select="count(/PhotoGallery/Photos/Photo)"/>;
}
if( currImageNo > <xsl:value-of select="count(/PhotoGallery/Photos/Photo)"/> )
{
currImageNo = 1;
}
container.filters[0].Apply();
// Show new selected image
show("div","photo"+currImageNo);
// Hide current image
hide("div","photo"+imgNumber);
container.filters[0].Play();
}
//
// 'startSlideShow'
//
// Starts the slideshow by using DHTML setInterval; specifying
// the function to call (nextImage) with an interval in milliseconds.
//
function startSlideShow()
{
timerId = setInterval ("nextImage()",5000); // 5 seconds interval
}
//
// 'stopSlideShow'
//
// Stops the slideshode using HTML clearInterval.
//
function stopSlideShow()
{
clearInterval(timerId);
}
</script>
<script language="javascript">
<xsl:comment>
<![CDATA[
// **************************************
//
// 'hide'
//
// Hides all tags of given names that have a specified id.
//
// Example hide("span","test") will hide the following elements...
//
// <span id="test">...</span>
// <span id="test">...</span>
//
// Input:
// sTagName - Specifies the name of the tag to look for e.g. 'span','div','p' etc.
// sTagId - Specifies the id of the tag to look for.
//
function hide(sTagName,sTagId)
{
var cElems = document.all.tags(sTagName);
var iNumElems = cElems.length;
for( var i = 0; i < iNumElems; i++ )
{
if( cElems.id == sTagId )
{
cElems.style.visibility = "hidden";
//cElems.style.display = "none";
}
}
}
// **************************************
//
// 'show'
//
// Shows all tags of given names that have a specified id.
//
// Example show("span","test") will show the following elements...
//
// <span id="test">...</span>
// <span id="test">...</span>
//
// Input:
// sTagName - Specifies the name of the tag to look for e.g. 'span','div','p' etc.
// sTagId - Specifies the id of the tag to look for.
//
function show(sTagName,sTagId)
{
var cElems = document.all.tags(sTagName);
var iNumElems = cElems.length;
for( var i = 0; i < iNumElems; i++ )
{
if( cElems.id == sTagId )
{
cElems.style.visibility = "visible";
//cElems.style.display = "block";
}
}
}
]]>
</xsl:comment>
</script>
<script language="javascript">
<xsl:comment>
<![CDATA[
//
// 'calcPhotoSize'
//
// This function calculated the best photo (image) width so that it fits best to
// the users screen and sets that width/height of the image.
//
function calcPhotoSize( imgIdprefix, no )
{
var nHorzPadding = 5;
var nVertPadding = 5;
var nLeftMargin = 0;
var nTopMargin = 75;
//alert( "Screen width x height = (" + screen.availWidth + "," + screen.availHeight + ")" );
// Get the image with requested image id
var oImage = document.images(imgIdprefix + no);
if( oImage == null )
{
alert( "Image '" + imgId + "' is null! ");
return;
}
var nImgWidth = oImage.width;
var nImgHeight = oImage.height;
var nProportion = nImgWidth/nImgHeight;
// Get width/height of the part of the photoX div element that does not contain the image
// (this will get the sizes of the texts displayed).
var nDivWidth = document.all.item("photo"+no).scrollWidth-nImgWidth;
var nDivHeight = document.all.item("photo"+no).scrollHeight-nImgHeight;
//alert( "Image " + no + ": nDivWidth = " + nDivWidth + " DivHeight = " + nDivHeight );
var nMaxWidth = screen.availWidth - nLeftMargin - nDivWidth - 2*nHorzPadding;
var nMaxHeight = screen.availHeight - nTopMargin - nDivHeight - 2*nVertPadding;
if( nProportion > 1 )
{
// Width is larger than height
if( nImgWidth - nMaxWidth > nImgHeight - nMaxHeight )
{
oImage.width = nMaxWidth;
oImage.height = oImage.width/nProportion;
}
else
{
oImage.height = nMaxHeight;
oImage.width = oImage.height*nProportion;
}
}
else
{
// Height is larger than width
if( nImgHeight - nMaxHeight > nImgWidth - nMaxWidth )
{
oImage.height = nMaxHeight;
oImage.width = oImage.height*nProportion;
}
else
{
oImage.width = nMaxWidth;
oImage.height = oImage.width/nProportion;
}
}
if( oImage.width > nMaxWidth ) alert("Ups width is too large for image "+no);
if( oImage.height > nMaxHeight) alert("Ups height is too large for image "+no);
//alert( "Image " + no + " width x height = (" + oImage.width + "," + oImage.height + ")"
// + "Max = (" + nMaxWidth + "," + nMaxHeight + ")" );
}
function newImage(arg)
{
if (document.images)
{
rslt = new Image();
rslt.src = arg;
return rslt;
}
}
function changeImages()
{
if (document.images && (preloadFlag == true))
{
for (var i=0; i<changeImages.arguments.length; i+=2)
{
document[changeImages.arguments].src = changeImages.arguments[i+1];
}
}
}
var preloadFlag = false;
function preloadImages()
{
if (document.images)
{
Start_over = newImage("images/Start-over.gif");
Stop_over = newImage("images/Stop-over.gif");
Prev_over = newImage("images/Prev-over.gif");
Next_over = newImage("images/Next-over.gif");
preloadFlag = true;
}
}
]]>
</xsl:comment>
</script>
<script language="JavaScript" for="window" event="onload">
// This code is executed when the window is loaded first time - thus
// it does some initialization...
preloadImages();
// Show first photo...
show("div","photo1");
</script>
<body scroll='no'>
<p align="right"><a href="" style="font-size:12pt" title="Exit the Photo Gallery (Alt+F4)" onclick="window.close()"><img alt="close" src="images/close-2.gif" border="0"/></a></p>
<table align="center" border="0" cellspacing="0" cellpadding="0" style="position:relative; top:-12pt;">
<tr>
<td align="center">
<a href="#" alt="Start SlideShow" onclick="startSlideShow()"><img alt="Start Slideshow" src="images/Start-2.gif" border="0"/></a><xsl:text> </xsl:text>
<a href="#" alt="Stop SlideShow" onclick="stopSlideShow()"><img alt="Stop Slideshow" src="images/Stop-2.gif" border="0"/></a><xsl:text> </xsl:text>
<a href="#" alt="Previous photo" onclick="prevImage()"><img alt="Previous Photo" src="images/Prev-2.gif" border="0"/></a><xsl:text> </xsl:text>
<a href="#" alt="Next photo" onclick="nextImage()"><img alt="Next Photo" src="images/Next-2.gif" border="0"/></a>
</td>
</tr>
</table>
<div id="container" class="transitioncontainer">
<xsl:apply-templates select="PhotoGallery/Photos/Photo"/>
</div>
</body>
</html>
</xsl:template>
<xsl:template match="Photo">
<div class="photocontainer">
<xsl:attribute name="id">photo<xsl:value-of select="position()"/></xsl:attribute>
<table class="phototable" cellspacing="0" cellpadding="0">
<tr>
<td></td>
<td align="right" valign="top">
Photo <xsl:value-of select="position()"/>/<xsl:value-of select="count(/PhotoGallery/Photos/Photo)"/>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<img border="0" xonload="calcPhotoSize()">
<xsl:attribute name="onload">calcPhotoSize("img",<xsl:value-of select="position()"/>)</xsl:attribute>
<xsl:attribute name="id">img<xsl:value-of select="position()"/></xsl:attribute>
<xsl:attribute name="alt"><xsl:value-of select="Description"/></xsl:attribute>
<xsl:attribute name="src"><xsl:value-of select="Link"/></xsl:attribute>
</img>
</td>
</tr>
<tr>
<td class="celltext" valign="top">
<xsl:value-of select="Description"/>
</td>
<td class="celltext" align="right" valign="top">
<b>Photo</b> | © <xsl:value-of select="Copyright/Year"/>
<xsl:value-of select="Copyright/Name"/>
</td>
</tr>
</table>
</div>
</xsl:template>
</xsl:stylesheet>
[/php]
The main script file is a xls file which holds all the commands for which it seems to calculate the size of the image and then displays it.
It also uses and xml file which is linked to the xls and this files stores the
image files and captions for the photo's.
The slideshow usually works like a treat but occassionally it display this message. "ups height is too large for image" this line is in the xls script file along with "ups width is too large for image" the width message has never appeared it just seems to be the height error.
I don't have enough knowledge to sort this out, does anyone know why this is happens? when this error occurs if I clear my history and cache down and then go back into my website it works ok.
Here is the script below:
[php]
<?xml version="1.0"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:output method="html"/>
<xsl:template match="/">
<html>
<head>
<title>Photo Gallery: <xsl:value-of select="PhotoGallery/Name"/></title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252"/>
<meta name="GENERATOR" content="XSL Stylesheet Generated"/>
<meta author="Michael Suodenjoki"/>
<style text="stylesheet">
body
{
font-family: "Comic Sans MS", "Helvetica";
font-size: 10pt;
color: white;
background-color: black;
}
table
{
font-size: 9pt;
}
.photocontainer
{
visibility:hidden;
position:absolute;
top:75px;
width:100%;
height:100%;
text-align: center;
}
.transitioncontainer
{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
filter:progid:DXImageTransform.Microsoft.Fade(duration=1,overlap=1.0);
}
.phototable
{
border: 0;
}
.celltext
{
color: rgb(200,240,200);
}
</style>
</head>
<script language="javascript">
// Note: Don't use CDATA here. This script code used XSL.
var currImageNo = 1; // Specifies the current selected photo.
var timerId; // Used as timer identifier for DHTML setInterval/clearInterval.
//
// 'prevImage'
//
// Select previous image. If current image is 1 the previous
// image will be set (by selectImage) to the last image in the
// gallery.
//
function prevImage()
{
selectImage(currImageNo,-1);
}
//
// 'nextImage'
//
// Selects next image.
//
function nextImage()
{
selectImage(currImageNo,+1);
}
//
// 'selectImage'
//
// This function selects a new imaged based on the current (old) image
// and an increment (+1,-1) telling which next new image number to show.
//
// The function wraps the increment around depending on the number
// of photos in the gallery.
//
function selectImage( imgNumber, incr )
{
// Calculate the new image number to show (the old is keept in imgNumber parameter)
currImageNo = currImageNo + incr;
if( currImageNo == 0 )
{
currImageNo = <xsl:value-of select="count(/PhotoGallery/Photos/Photo)"/>;
}
if( currImageNo > <xsl:value-of select="count(/PhotoGallery/Photos/Photo)"/> )
{
currImageNo = 1;
}
container.filters[0].Apply();
// Show new selected image
show("div","photo"+currImageNo);
// Hide current image
hide("div","photo"+imgNumber);
container.filters[0].Play();
}
//
// 'startSlideShow'
//
// Starts the slideshow by using DHTML setInterval; specifying
// the function to call (nextImage) with an interval in milliseconds.
//
function startSlideShow()
{
timerId = setInterval ("nextImage()",5000); // 5 seconds interval
}
//
// 'stopSlideShow'
//
// Stops the slideshode using HTML clearInterval.
//
function stopSlideShow()
{
clearInterval(timerId);
}
</script>
<script language="javascript">
<xsl:comment>
<![CDATA[
// **************************************
//
// 'hide'
//
// Hides all tags of given names that have a specified id.
//
// Example hide("span","test") will hide the following elements...
//
// <span id="test">...</span>
// <span id="test">...</span>
//
// Input:
// sTagName - Specifies the name of the tag to look for e.g. 'span','div','p' etc.
// sTagId - Specifies the id of the tag to look for.
//
function hide(sTagName,sTagId)
{
var cElems = document.all.tags(sTagName);
var iNumElems = cElems.length;
for( var i = 0; i < iNumElems; i++ )
{
if( cElems.id == sTagId )
{
cElems.style.visibility = "hidden";
//cElems.style.display = "none";
}
}
}
// **************************************
//
// 'show'
//
// Shows all tags of given names that have a specified id.
//
// Example show("span","test") will show the following elements...
//
// <span id="test">...</span>
// <span id="test">...</span>
//
// Input:
// sTagName - Specifies the name of the tag to look for e.g. 'span','div','p' etc.
// sTagId - Specifies the id of the tag to look for.
//
function show(sTagName,sTagId)
{
var cElems = document.all.tags(sTagName);
var iNumElems = cElems.length;
for( var i = 0; i < iNumElems; i++ )
{
if( cElems.id == sTagId )
{
cElems.style.visibility = "visible";
//cElems.style.display = "block";
}
}
}
]]>
</xsl:comment>
</script>
<script language="javascript">
<xsl:comment>
<![CDATA[
//
// 'calcPhotoSize'
//
// This function calculated the best photo (image) width so that it fits best to
// the users screen and sets that width/height of the image.
//
function calcPhotoSize( imgIdprefix, no )
{
var nHorzPadding = 5;
var nVertPadding = 5;
var nLeftMargin = 0;
var nTopMargin = 75;
//alert( "Screen width x height = (" + screen.availWidth + "," + screen.availHeight + ")" );
// Get the image with requested image id
var oImage = document.images(imgIdprefix + no);
if( oImage == null )
{
alert( "Image '" + imgId + "' is null! ");
return;
}
var nImgWidth = oImage.width;
var nImgHeight = oImage.height;
var nProportion = nImgWidth/nImgHeight;
// Get width/height of the part of the photoX div element that does not contain the image
// (this will get the sizes of the texts displayed).
var nDivWidth = document.all.item("photo"+no).scrollWidth-nImgWidth;
var nDivHeight = document.all.item("photo"+no).scrollHeight-nImgHeight;
//alert( "Image " + no + ": nDivWidth = " + nDivWidth + " DivHeight = " + nDivHeight );
var nMaxWidth = screen.availWidth - nLeftMargin - nDivWidth - 2*nHorzPadding;
var nMaxHeight = screen.availHeight - nTopMargin - nDivHeight - 2*nVertPadding;
if( nProportion > 1 )
{
// Width is larger than height
if( nImgWidth - nMaxWidth > nImgHeight - nMaxHeight )
{
oImage.width = nMaxWidth;
oImage.height = oImage.width/nProportion;
}
else
{
oImage.height = nMaxHeight;
oImage.width = oImage.height*nProportion;
}
}
else
{
// Height is larger than width
if( nImgHeight - nMaxHeight > nImgWidth - nMaxWidth )
{
oImage.height = nMaxHeight;
oImage.width = oImage.height*nProportion;
}
else
{
oImage.width = nMaxWidth;
oImage.height = oImage.width/nProportion;
}
}
if( oImage.width > nMaxWidth ) alert("Ups width is too large for image "+no);
if( oImage.height > nMaxHeight) alert("Ups height is too large for image "+no);
//alert( "Image " + no + " width x height = (" + oImage.width + "," + oImage.height + ")"
// + "Max = (" + nMaxWidth + "," + nMaxHeight + ")" );
}
function newImage(arg)
{
if (document.images)
{
rslt = new Image();
rslt.src = arg;
return rslt;
}
}
function changeImages()
{
if (document.images && (preloadFlag == true))
{
for (var i=0; i<changeImages.arguments.length; i+=2)
{
document[changeImages.arguments].src = changeImages.arguments[i+1];
}
}
}
var preloadFlag = false;
function preloadImages()
{
if (document.images)
{
Start_over = newImage("images/Start-over.gif");
Stop_over = newImage("images/Stop-over.gif");
Prev_over = newImage("images/Prev-over.gif");
Next_over = newImage("images/Next-over.gif");
preloadFlag = true;
}
}
]]>
</xsl:comment>
</script>
<script language="JavaScript" for="window" event="onload">
// This code is executed when the window is loaded first time - thus
// it does some initialization...
preloadImages();
// Show first photo...
show("div","photo1");
</script>
<body scroll='no'>
<p align="right"><a href="" style="font-size:12pt" title="Exit the Photo Gallery (Alt+F4)" onclick="window.close()"><img alt="close" src="images/close-2.gif" border="0"/></a></p>
<table align="center" border="0" cellspacing="0" cellpadding="0" style="position:relative; top:-12pt;">
<tr>
<td align="center">
<a href="#" alt="Start SlideShow" onclick="startSlideShow()"><img alt="Start Slideshow" src="images/Start-2.gif" border="0"/></a><xsl:text> </xsl:text>
<a href="#" alt="Stop SlideShow" onclick="stopSlideShow()"><img alt="Stop Slideshow" src="images/Stop-2.gif" border="0"/></a><xsl:text> </xsl:text>
<a href="#" alt="Previous photo" onclick="prevImage()"><img alt="Previous Photo" src="images/Prev-2.gif" border="0"/></a><xsl:text> </xsl:text>
<a href="#" alt="Next photo" onclick="nextImage()"><img alt="Next Photo" src="images/Next-2.gif" border="0"/></a>
</td>
</tr>
</table>
<div id="container" class="transitioncontainer">
<xsl:apply-templates select="PhotoGallery/Photos/Photo"/>
</div>
</body>
</html>
</xsl:template>
<xsl:template match="Photo">
<div class="photocontainer">
<xsl:attribute name="id">photo<xsl:value-of select="position()"/></xsl:attribute>
<table class="phototable" cellspacing="0" cellpadding="0">
<tr>
<td></td>
<td align="right" valign="top">
Photo <xsl:value-of select="position()"/>/<xsl:value-of select="count(/PhotoGallery/Photos/Photo)"/>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<img border="0" xonload="calcPhotoSize()">
<xsl:attribute name="onload">calcPhotoSize("img",<xsl:value-of select="position()"/>)</xsl:attribute>
<xsl:attribute name="id">img<xsl:value-of select="position()"/></xsl:attribute>
<xsl:attribute name="alt"><xsl:value-of select="Description"/></xsl:attribute>
<xsl:attribute name="src"><xsl:value-of select="Link"/></xsl:attribute>
</img>
</td>
</tr>
<tr>
<td class="celltext" valign="top">
<xsl:value-of select="Description"/>
</td>
<td class="celltext" align="right" valign="top">
<b>Photo</b> | © <xsl:value-of select="Copyright/Year"/>
<xsl:value-of select="Copyright/Name"/>
</td>
</tr>
</table>
</div>
</xsl:template>
</xsl:stylesheet>
[/php]
0
Comments