Symphony.

Hello folks.

After a spell away from learning Symphony and XSLT, I am back and enjoying working with this excellent platform more than ever!

I am still fairly new to the workings of XSLT, so i wonder if anybody can shed any light for me...

I want to create a "portfolio" based around thumbnails and panels. When a user clicks a thumbnail, a panel appears in the main page body with all the relevant product/element information, as well as a close link to return to the thumbnail view.

I have done this before with other solutions but i need to know how one goes about assigning a unique, ascending ID to div elements using XSLT (so i can then use a client-side function to make the selection accurate)

eg:

--- SECTION ONE

<div class="button" id="button_1>
     <p>this is a thumbnail</p>
</div>   

<div class="panel" id="panel_1>
     <p>panel with relevant information to the thumbnail</p>
</div> 

--- SECTION TWO

<div class="button" id="button_2>
     <p>this is a thumbnail</p>
</div>   

<div class="panel" id="panel_2>
     <p>panel with relevant information to the thumbnail</p>
</div>  

...and so on.

I have googled and looked for bits and pieces. I found something interesting on generate-id(), but the w3 website seems to be down :(

When matching or looping over elements you can use the position() method to return the index (starting from 1) to get an ascending number. Alternatively if these portfolio items are Symphony entries then why not use their Symphony IDs? (<entry id="..." />)

ah! good point about the symphony entries. I will dig a bit and see what i can do :)

ok, newbie question.

I can't seem to find the way to grab the entry ID and mirror it into the output div id in the xslt....can anybody pass me onto a good tutorial or share any information? :)

i think i found the answer using XSLT attribute and XSLT number...will post back nevertheless if it will help anybody else in the same situation...that is if it works.

alright, so i got the desired effect..

<div class="thumb">
     <xsl:attribute name="id">thumb_<xsl:number/></xsl:attribute>
     <img src="{$workspace}{project-image/@path}{project-image/filename}" width="200px" alt="description"/>
     <h3><xsl:value-of select="project-title"/></h3>
</div>

<div class="panel">
     <xsl:attribute name="id">panel_<xsl:number/></xsl:attribute>
     <h2><xsl:value-of select="project-title"/></h2>
     <p><xsl:value-of select="project-body"/></p>
     <img src="{$workspace}{project-image/@path}{project-image/filename}" width="600px" alt="description"/>
</div>

Im pretty new to XSLT, so this is by no means stellar coding...in fact i hate the inline styling on the images so will be looking at how symphony can handle different image sizes with JIT...but on the whole the div numbering solution works for me...although it feels a bit dirty.

any input is appreciated.