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 610 posts 906 karma points
    Oct 02, 2009 @ 11:53
    Fredrik Esseen
    0

    Loop Items into different li:s

    Hi!

    Im using the Easyslider to show products on my page and now I want to show 4 products in each "slide".

    This is what I have for now:

    <?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="/">
    <div id="slider">
    <ul>    
        <li> 
    <xsl:for-each select="$currentPage/descendant::node [@nodeTypeAlias = 'Erbjudandelista']/node [string(data [@alias='umbracoNaviHide']) != '1']">
      <div class="ErbjudandeItem">
      <xsl:variable name="picFile" select="data[@alias='imgAlias']"/>
       <xsl:if test="$picFile !=''">
        <xsl:variable name="galImage" select="umbraco.library:GetMedia($picFile,0)/data[@alias='umbracoFile']"/>
        <img src="{concat(substring-before($galImage,'.'), '.jpg')}"/>
       </xsl:if>
       <xsl:value-of select="@nodeName"/>  
      </div>
    </xsl:for-each>
     </li>
    </ul>
      </div>
    </xsl:template>
    </xsl:stylesheet>

     

    How should I loop this so that after 4 items is looped a new li is created?

  • Christer Josefsson 55 posts 93 karma points
    Oct 02, 2009 @ 12:15
    Christer Josefsson
    0

    I guess you can use

    position() mod 4 = 1
  • Douglas Robar 3570 posts 4711 karma points MVP ∞ admin c-trib
    Oct 02, 2009 @ 12:40
    Douglas Robar
    0

    You'll probably have an issue opening and closing the LI in different areas of the xslt. But there's a way to solve that, too. In fact, you can see an example of the whole solution, including the "position() mod " in the Runway Gallery module.

    The relevant bit of xslt from the gallery module is:

    <xsl:param name="currentPage"/>

    <xsl:variable name="imagesPerRow" select="4"/>



    <!-- =============================================================== -->



    <xsl:template match="/">

        <!-- a little hack to work around the xslt syntax checker when
    opening/closing UL lists in two separate IF statements -->

        <!-- if it weren't for IE we could use a single UL and simply float the LI's and they'd auto-wrap -->

        <!-- but for IE we either need separate UL rows or else we need to hard-code the LI's height in CSS -->

        <!-- this approach with separate UL rows works in all browsers and row heights -->

        <xsl:variable name="ulOpen"><xsl:text>&lt;ul
    class="runwayGallery"&gt;</xsl:text></xsl:variable>

        <xsl:variable name="ulClose"><xsl:text>&lt;/ul&gt;</xsl:text></xsl:variable>



        <xsl:for-each select="$currentPage/node [string(data [@alias='umbracoNaviHide']) != '1']">

            <!-- open a row of images -->

            <xsl:if test="position() = 1 or position() mod $imagesPerRow = 0">

                <xsl:value-of select="$ulOpen" disable-output-escaping="yes" />

            </xsl:if>



            <!-- display each image in the row, with the count of photos in each gallery -->

            <li>

                <a href="{umbraco.library:NiceUrl(@id)}">

                    <img src="{concat(substring-before(./node/data [@alias='umbracoFile'],'.'), '_thumb.jpg')}"/>

                    <br />

                    <b><xsl:value-of select="@nodeName"/></b>

                </a>

                <br />

                <xsl:value-of select="count(./node)"/>

                <xsl:text> Photo</xsl:text>

                <xsl:if test="count(./node) &gt; 1">

                    <xsl:text>s</xsl:text>

                </xsl:if>

            </li>



            <!-- close the row of images -->

            <xsl:if test="position() = ($imagesPerRow - 1) or position() mod ($imagesPerRow - 1) = 0 or position() = last()">

                <xsl:value-of select="$ulClose" disable-output-escaping="yes"/>

            </xsl:if>

        </xsl:for-each>



    </xsl:template>



    <!-- =============================================================== -->

     

    cheers,
    doug.

  • Fredrik Esseen 610 posts 906 karma points
    Oct 02, 2009 @ 13:24
    Fredrik Esseen
    0

    That worked awesome!

    A little bit embarrasing that I didnt think of the gallery...

    Thanks!

Please Sign in or register to post replies

Write your reply to:

Draft