Hi all,
I am at the beginning level of learning xslt and I am building a slideshow using xslt and I AM STACK.... any help

I tried to generate the image index position for each photo (like 1/10, 2/10, .... 10/10 to each slideshow image)

Here is the xml


<?xml version="1.0" encoding="iso-8859-1"?>
<system-index-block name="slide-show-pic" current-time="1170453829775">
<system-file id="4a482a098da6186301db9b75e575659d">
<name>this is the first image name - _MG_0750.jpg</name>
<is-published>true</is-published>
<display-name>this is image 1</display-name>
    <path>_MG_0750.jpg</path>
<created-by>aareki</created-by>
<created-on>1169477347901</created-on>
<last-modified-by>aareki</last-modified-by>
<last-modified>1169619738558</last-modified>
<file-size>24927</file-size>
</system-file>

    <system-file id="4a482a728da6186301db9b75f99bf012">
<name>this is the second image name - _MG_0770.jpg</name>
<is-published>true</is-published>
<display-name>this is image 2</display-name>
    <path>_MG_0770.jpg</path>
<created-by>aareki</created-by>
<created-on>1169477347984</created-on>
<last-modified-by>aareki</last-modified-by>
<last-modified>1169619789955</last-modified>
<file-size>29228</file-size>
</system-file>

    <system-file id="4a482aa28da6186301db9b753cebc21d">
<name>this is the third image name -_MG_0777.jpg</name>
<is-published>true</is-published>
    <path>_MG_0777.jpg</path>
<created-by>aareki</created-by>
<created-on>1169477348035</created-on>
<last-modified-by>aareki</last-modified-by>
<last-modified>1169477348035</last-modified>
<file-size>23158</file-size>
</system-file>
</system-index-block>


here is the xslt

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
   <xsl:output indent="yes" method="xml"/>
 <xsl:variable name="separator"> | </xsl:variable>


   <xsl:template match="/">

<h2 align="center">Photo Gallery </h2>
<xsl:apply-templates/>
</xsl:template>


<xsl:template match="system-index-block">
<div>

  <script language="Javascript" type="text/javascript">
<xsl:comment>
<![CDATA[
      var images = new Array();
      var photos = new Array();
      var i = 0;
      ]]>
      <xsl:apply-templates select="system-file"/>

      <![CDATA[

      // now loop over our index of images
      for(var i=0; i <]]><xsl:value-of select="count(system-file)"/><![CDATA[; i++) {
        images[i] = new Image();
        images[i].src = photos[i];
      }

      function forward()
      {
      // this sends the user away if they go past the end
      if(frame >= images.length-1) {
          window.alert('Thank you for viewing the pictures');
          //location.href = "#";
        }
        else
          document.picture.src = images[++frame].src;
      }
      function backwards()
      {
          if(frame == 0) {
            // this sends the user away if they go negative
            window.alert('Thank you for viewing the pictures');
            //location.href = "#";
          }
          else
            document.picture.src = images[frame-1].src;
      }
      function first() { document.picture.src=images[1].src;}
      function last() { document.picture.src=images[images.length-1].src;}

      var frame = 0;

]]>
</xsl:comment>
</script>

    <table align="left" border="0" summary="Photo Gallery - Watts Lecture 2006" width="99%">
        <tr>
          <td/><td>
            <div align="center">
            <a alt="first" href="#" onClick="first()">first</a>
            <xsl:value-of select="$separator"/>
            <a alt="previous" href="#" onClick="backwards()">Previous</a>
            <xsl:value-of select="$separator"/>
            <a alt="next" href="#" onClick="forward()">next</a>
            <xsl:value-of select="$separator"/>
            <a alt="last" href="#" onClick="last()">last</a>
            <xsl:value-of select="$separator"/>
            <a alt="home" href="/external/sites/training_site/Business-School/thumbnail">home</a>
            </div>


<p align="center">
(<xsl:variable name="index">
         <xsl:value-of select="position()"/>
       </xsl:variable>
        <xsl:value-of select="$index"/>
of <xsl:value-of select="count(system-file)"/>)
</p>
          </td><td/>
        </tr>

      <tr>
        <td><img alt="Spacer" height="100" src="/internet/files/images/general/spacer.gif" width="1"/></td>
        <td width="99%">
        <div align="center"><img alt="Picture" name="picture" src="/internet/files/images/general/spacer.gif"/></div>


<p align="center">
(<xsl:variable name="index2"><xsl:value-of select="position()"/> </xsl:variable>
         <xsl:value-of select="$index2"/>
of <xsl:value-of select="count(system-file)"/>)
</p>

        </td><td/>
      </tr>
    </table>



</div>
   </xsl:template>
  <xsl:template match="system-file">

        photos[i] = "[system-asset:file]<xsl:value-of select="path"/>[/system-asset:file]"; i++;
        <xsl:attribute name="id"><xsl:value-of select="position()"/></xsl:attribute>
       <xsl:variable name="index">
         <xsl:value-of select="position()"/>
       </xsl:variable>
        <xsl:value-of select="$index"/>


   </xsl:template>

</xsl:stylesheet>



Note: when you click next I want to see the image position (for example if it is image 4 - 4/10) instead of displaying every position

Well you can do this via JavaScript rather than XSLT. Where exactly is the problem, you just show the current index and the length of the images array.

Your code would also be easier to read if you put all the script inside a CDATA section, not just those bits that need it.

--

Joe (Microsoft MVP - XML)

Don't try to debug your XSLT at the same time as you debug your HTML and Javascript. First make sure you know exactly what HTML you want to generate (create a mockup by hand and make sure it works). Then write an XSLT stylesheet designed to generate this HTML from your XML. Test it outside the browser to make sure it generates the right HTML. Then (finally) check that the HTML still does the right thing when you load it into the browser.

If you need to report further problems on this list, be sure to distinguish whether the XSLT isn't producing the HTML that you want, or whether the HTML isn't behaving the way that you want when loaded into the browser (the latter isn't an XSLT problem and therefore isn't really in scope for this forum.)

Michael Kay
http://www.saxonica.com/
Author, XSLT Programmer's Reference and XPath 2.0 Programmer's Reference

The XSLT is not producing the html I want. The problem is I couldn't get the numbering when it displays the image. Below on the xml list I have three images. When image three displays I want to see 3/3 somehere let say top-right side of the image. (the same of the first image 1/3, and second image 2/3)

To generate the above I wrote the following but it generate only index one (1/3)

<p align="center">
(<xsl:variable name="index">
         <xsl:value-of select="position()"/>
       </xsl:variable>
        <xsl:value-of select="$index"/>
of <xsl:value-of select="count(system-file)"/>)
</p>

I think my problem is attaching the index numbering with the image ----- any clue or some similar example I can see

Thanks

Firstly, this code:

<xsl:variable name="index">
         <xsl:value-of select="position()"/>
       </xsl:variable>
        <xsl:value-of select="$index"/>

is equivalent to

<xsl:variable name="index" select="position()"/>
<xsl:value-of select="$index"/>

which is equivalent to

<xsl:value-of select="position()"/>

Code gets easier to debug if you simplify it first...

Secondly, this code appears twice in your stylesheet. It appears in the <xsl:template match="system-index-block">, where it is only executed once and will output "1 of 3". It also appears in the <xsl:template match="system-file">, but that's only called within an <xsl:comment>, so the output won't be displayed.

Michael Kay
http://www.saxonica.com/
Author, XSLT Programmer's Reference and XPath 2.0 Programmer's Reference

That makes sense but even I put the following for-each on
<xsl:template match="system-index-block">; which is outside <xsl:comment> -that didn't give me what I want. I can see the output 123 of 3. But I want it numbering per image display.


<xsl:for-each select="system-file">
<xsl:value-of select="position()"/>
</xsl:for-each>

how can I displayed the output outside the comment section?