Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Fredrik Esseen 608 posts 904 karma points
    Sep 15, 2010 @ 10:46
    Fredrik Esseen
    0

    Add jquery.cycle dynamically in xslt

    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?

Please Sign in or register to post replies

Write your reply to:

Draft