Hi!

In looping a lot of products on a page where every product has images that I want to show with jquery.cycle. The problem is that adding multiple cycles with static id:s is not possible. Im trying to do this dynamically in xslt with adding the javascript part.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE xsl:stylesheet [ <!ENTITY nbsp "&#x00A0;"> ]>
<xsl:stylesheet 
 version="1.0" 
 xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 
 xmlns:msxml="urn:schemas-microsoft-com:xslt"
 xmlns:umbraco.library="urn:umbraco.library" xmlns:Exslt.ExsltCommon="urn:Exslt.ExsltCommon" xmlns:Exslt.ExsltDatesAndTimes="urn:Exslt.ExsltDatesAndTimes" xmlns:Exslt.ExsltMath="urn:Exslt.ExsltMath" xmlns:Exslt.ExsltRegularExpressions="urn:Exslt.ExsltRegularExpressions" xmlns:Exslt.ExsltStrings="urn:Exslt.ExsltStrings" xmlns:Exslt.ExsltSets="urn:Exslt.ExsltSets" 
 exclude-result-prefixes="msxml umbraco.library Exslt.ExsltCommon Exslt.ExsltDatesAndTimes Exslt.ExsltMath Exslt.ExsltRegularExpressions Exslt.ExsltStrings Exslt.ExsltSets ">

<xsl:output method="xml" omit-xml-declaration="yes"/>

<xsl:param name="currentPage"/>

<xsl:template match="/">
<xsl:for-each select="$currentPage/ancestor-or-self::*[@isDoc] [@level=3]/*[@isDoc] [string(umbracoNaviHide) != '1']">
<div class="ReservdelPane">
  <h2><xsl:value-of select="@nodeName"/></h2>
<style type="text/css">
.slideshow2 { height: 263px; width: 350px;}
.slideshow2 img { }
</style>
<xsl:if test="imgAlias!=''">
  <div class="{concat('slideshow',position())}">
   <xsl:variable name="mediaItems" select="umbraco.library:GetMedia(imgAlias, true())"/>
    <xsl:for-each select="$mediaItems/Image"> 
     <xsl:variable name="picFile" select="umbracoFile"/>
           <img width="350">
               <xsl:attribute name="src"><xsl:value-of select="$picFile"/></xsl:attribute>
           </img>
  </xsl:for-each>
   </div> 
</xsl:if>
    
</div>
<script type="text/javascript">
<![CDATA[
$(document).ready(function() {
$('{concat('.slideshow',position())}').after('<div id="{concat('nav',position())}">').cycle({
   fx:     'fade', 
   speed:  'slow', 
   timeout: 4000, 
   next:   '#next', 
   prev:   '#prev',
   pager:  '#nav{position()}',
   pause:  1,
   timeout: 0,
 pagerAnchorBuilder: function(idx, slide) { 
        return '<li><a href="#"><img src="' + slide.src + '" width="50" height="50" /></a></li>';
 } 
  });
});
]]> 
</script>
</xsl:for-each>
</xsl:template>
</xsl:stylesheet>

Im having some problems with the javascript part not getting rendered properly.
And I also have mot stuff happening in document.ready in the master file. Is it necessay to use document.ready?

Someone have a nice solution?