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 594 posts 830 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 53 posts 81 karma points
    Oct 02, 2009 @ 12:15
    Christer Josefsson
    0

    I guess you can use

    position() mod 4 = 1
  • Douglas Robar 3570 posts 4671 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 594 posts 830 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!

  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies