error in an xml javascript based slideshow

Looney · June 3rd, 2005, 01:41 PM

Hi All ,
          Well as the title suggests i am trying to implment a javascript based slideshow which reads of an xml file and displays the pictures the xml file also contains a link for each image element which is displayed when the user clicks ona particular image.The code was embedded in my aspx page but it does n't work , during my past uncountable attempts to view the script in Firefox or IE i get this error
Error: document.images.slide has no properties
Source File: http://localhost/Clipstone_Yamaha/Default.aspx
Line: 95
I am just a newbie to javascripts and have very recently recognised the potential power of them . I would be very greatfull if someone could please help me fix this error as i can feel it that the code is not too far from what it's meant to accomplish as i have managed to read of my xml file and display the content as an html table and i have manged to display and animation based on some passign in some pictures' url and links as array to my functions. Any help would be very highly appreciated .

<script type="text/javascript" language="javascript" >
    // JScript File
var xmlDoc ;
var slideimages=new Array(10);
var slidelinks=new Array(10);
var slideshowspeed=2000
var whichlink=0
var whichimage=0

function importXML()
{ alert('inside importXML 1');
    if (document.implementation && document.implementation.createDocument)
    {
        xmlDoc = document.implementation.createDocument("", "", null);
        xmlDoc.onload = createTable;
    }
    else if (window.ActiveXObject)
    {
        xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
        xmlDoc.onreadystatechange = function () {
            if (xmlDoc.readyState == 4) createTable()
        };
     }
    else
    {
        alert('Your browser can\'t handle this script');
        return;
    }
    xmlDoc.load("Top_Animation.xml");
}

function createTable()
{
    var x = xmlDoc.getElementsByTagName('Image');

    for (i=0;i<x.length;i++)
    {
        for (j=0;j<x[i].childNodes.length;j++)
        {
            if (x[i].childNodes[j].nodeType != 1) continue;
            if (j=0)
            {
            document.images.item['slide']= x[i].childNodes[j].firstChild.nodeValue
        slideshowimages(x[i].childNodes[j].firstChild.nodeValue);

            }
            if (j=1)
            {

            slideshowlinks(x[i].childNodes[j].firstChild.nodeValue);

            }

                    }

    }

}
function gotoshow()
{ importXML();
    if (!window.winslide||winslide.closed)
        winslide=window.open(slidelinks[whichlink])
    else
        winslide.location=slidelinks[whichlink]
        winslide.focus()
}
function slideshowimages()
{
    for (i=0;i<slideshowimages.arguments.length;i++)
    {
        slideimages[i]=new Image()
        slideimages[i].src=slideshowimages.arguments[i]
    }
}

function slideshowlinks()
{
    for (i=0;i<slideshowlinks.arguments.length;i++)
        slidelinks[i]=slideshowlinks.arguments[i]
}
function slideit()
{
    if (!document.images)
    return
        document.images.slide.src=slideimages[whichimage].src
        whichlink=whichimage

    if (whichimage<slideimages.length-1)
        whichimage++
    else
        whichimage=0
        setTimeout("slideit()",slideshowspeed)
}

slideit()

    </script>
<body >
<a href="javascript:gotoshow();"><img alt="animated banner" src="http://localhost/Clipstone_Yamaha/images/header1.jpg" id="slide"/></a>

My xml file looks like
<?xml version="1.0" encoding="utf-8" ?>
<?xml-stylesheet type="text/xsl" href="Top_Animation.xsl"?>
<Images xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://localhost/Clipstone_Yamaha/Top_Animation.xsd">
  <Image>
    <URL>
      http://localhost/Clipstone_Yamaha/images/header1.jpg
    </URL>
    <Link>
      http://food.epicurious.com/run/recipe/view?id=13285
    </Link>
  </Image>
  <Image>
    <URL>
      http://localhost/Clipstone_Yamaha/images/header2.jpg
    </URL>
    <Link>
      http://food.epicurious.com/run/recipe/view?id=10092
    </Link>
  </Image>
  <Image>
    <URL>
      http://localhost/Clipstone_Yamaha/images/header3.jpg
    </URL>
    <Link>
      http://food.epicurious.com/run/recipe/view?id=100975
    </Link>
  </Image>
  <Image>
    <URL>
      http://localhost/Clipstone_Yamaha/images/header4.jpg
    </URL>
    <Link>
      http://food.epicurious.com/run/recipe/view?id=2876
    </Link>
  </Image>
  <Image>
    <URL>
      http://localhost/Clipstone_Yamaha/images/header5.jpg
    </URL>
    <Link>
      http://food.epicurious.com/run/recipe/view?id=20010
    </Link>
  </Image>
</Images>

my xss file looks like
<?xml version="1.0" encoding="utf-8"?>
<xs:schema id="Images" xmlns="" xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:msdata="urn:schemas-microsoft-com:xml-msdata">
  <xs:element name="Images" msdata:IsDataSet="true">
    <xs:complexType>
      <xs:choice maxOccurs="unbounded">
        <xs:element name="Image">
          <xs:complexType>
            <xs:sequence>
              <xs:element name="URL" type="xs:string" minOccurs="0" />
              <xs:element name="Link" type="xs:string" minOccurs="0" />
            </xs:sequence>
          </xs:complexType>
        </xs:element>
      </xs:choice>
    </xs:complexType>
  </xs:element>
</xs:schema>

My xsl file looks something like this
<?xml version="1.0" encoding="utf-8"?>

<xsl:stylesheet version="1.0"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">
    <html>
    <body>
    
      <h2>My Images</h2>
      <table border="1">
        <tr bgcolor="#9acd32">
          <th align="left">URL</th>
          <th align="left">Link</th>
        </tr>
        <xsl:for-each select="Images/Image">
          <tr>
            <td>
              <xsl:value-of select="URL"/>
            </td>
            <td>
              <xsl:value-of select="Link"/>
            </td>
          </tr>
        </xsl:for-each>
      </table>
    </body>
    </html>
</xsl:template>

</xsl:stylesheet>

Thanxs in advance !

Looney!

Looney · June 4th, 2005, 03:20 PM

Hi All, Well after not getting any help from anyone and at the same time trying to fix the script myself since my first post , I have finally manged to successfully make a javascript which reads of Picture Urls and links from a server side XMl file and then displays them in the browser ,I have it currently running in Both IE and Mozilla type browsers (Netscape, FireFox).The problem i found was that in Mozilla the index of the child nodes from the xml file are numbered in weird fashion .It would number the first node(Zeroth) as 3 instead of
So i had to make two different methods to load up the array Pix filled with all the urls .I also have another function to preload the images in the background inorder cut down on client -server network traffic.The idea of loading these urls and there corresponding links from an xml File residing on the server was that now I can have a webform in my Admin site which can add new images and links , update & delete existing entries .i guess it's slight different approach for Content management ! I hope this is usefull to someone out there !As it sure took me a while . This is my first Post ever providing a solution to a problem !Happy Programming

Code:

<script type="text/javascript" language="javascript"  >
    // JScript File
var xmlDoc ;
pix = new Array();
links = new Array();
var i = 0;
function importXML()
{    //alert('inside importXML 1');
if (document.implementation && document.implementation.createDocument)
{
xmlDoc = document.implementation.createDocument("", "", null);
xmlDoc.onload = populatePIXFireFox;
}
else if (window.ActiveXObject)
{
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.onreadystatechange = function () {
if (xmlDoc.readyState == 4) populatePIXIE()
};
}
else
{
alert('Your browser can\'t handle this script');
return;
}
xmlDoc.load("Top_Animation.xml");
}
function populatePIXFireFox()
{   //alert('inside populatePIX');
var x = xmlDoc.getElementsByTagName('Image');
//alert(x.length.toString());
for (i=0;i<x.length;i++)
{
for (j=0;j<x[i].childNodes.length;j++)
{  
    //alert('x[i].childNodes.length =' + x[i].childNodes.length.toString());
if (x[i].childNodes[j].nodeType != 1) continue;
//alert('j= '+ j.toString() +'i= '+ i.toString());
if (j==1)
{
pix[i]=x[i].childNodes[j].firstChild.nodeValue;
//alert('j= '+ j.toString() +'i= '+ i.toString());
            //alert(pix[i].toString());
}
if (j!=1)
{
    //alert('j= '+ j.toString() +'i= '+ i.toString());
    links[i]=x[i].childNodes[j].firstChild.nodeValue;
            //slideshowlinks(x[i].childNodes[j].firstChild.nodeValue);

}

}

}
//alert('these are the pics '+pix.toString());
//alert('these are the links '+links.toString());
MM_preloadImages();
slideshow();
}
function populatePIXIE()
{   //alert('inside populatePIX');
var x = xmlDoc.getElementsByTagName('Image');
//alert(x.length.toString());
for (i=0;i<x.length;i++)
{
for (j=0;j<x[i].childNodes.length;j++)
{  
    //alert('x[i].childNodes.length =' + x[i].childNodes.length.toString());
if (x[i].childNodes[j].nodeType != 1) continue;
//alert('j= '+ j.toString() +'i= '+ i.toString());
if (j==0)
{
pix[i]=x[i].childNodes[j].firstChild.nodeValue;
//alert('j= '+ j.toString() +'i= '+ i.toString());
            //alert(pix[i].toString());
}
if (j==1)
{//alert('j= '+ j.toString() +'i= '+ i.toString());
links[i]=x[i].childNodes[j].firstChild.nodeValue;
        //slideshowlinks(x[i].childNodes[j].firstChild.nodeValue);

}

}

}
//alert('these are the pics '+pix.toString());
//alert('these are the links '+links.toString());
MM_preloadImages();
slideshow();
}
function slideshow(){
setInterval("change()", 1000);
}
function change(){
document.images.slide.src = pix[i];
i = i + 1;
if (i > (pix.length-1)) {i = 0}
}


function MM_preloadImages() { //v3.0
    // counter
     var i = 0;
     // create object
     imageObj = new Image();
// set image list
     images =pix
      // start preloading
     for(i=0; i<=pix.length; i++)
     {
          imageObj.src=pix[i];
     }
}
function gotoshow(){
if (!window.winslide||winslide.closed)
winslide=window.open(links[i])
else
winslide.location=links[i]
winslide.focus()
}

</script>
</head>
<body  onload="importXML();">
<a href="javascript:gotoshow();"><img src="http://localhost/Clipstone_Yamaha/images/header1.jpg"  id="slide"/></a>

Looney!

mat41 · June 5th, 2005, 06:04 PM

Glad to hear you sorted your problem.

;;;Hi All, Well after not getting any help from anyone
This is the classic ASP area of the forum - your post would have been better suited in th JS area

Wind is your friend
Matt

Looney · June 6th, 2005, 12:27 AM

Hi Matt , Firstly thanx a lot for replying to my post , i was thinking that nobody even bothered reading it .Well i am glad i was wrong.i guess i 'll try to be more specific when i pick a forum in future so i post at the right one :-) Take it easy Mate !

Looney!

mat41 · June 6th, 2005, 01:16 AM

You are welcome. They are very helpful bunch around here. For best results be specific, including errors etc... and if possible try to post the problematic code only.

Wind is your friend
Matt