Hi there,

Yesterday i came across an issue with the Runway galleryListPhotos.xslt. I want a collection of items, regardless of how many items there are in the collection, to be rendered in rows of five. The runway gallery uses unordered lists for that. During a test i found that the 11th item in a collection of 12 isn't correctly rendered in an unordered list, but is rendered outside a list, like so:

<ul>
   <li>item 1</li>
   <li>item 2</li>
   <li>item 3</li>
   <li>item 4</li>
   <li>item 5</li>
</ul>
<ul>
   <li>item 6</li>
   <li>item 7</li>
   <li>item 8</li>
   <li>item 9</li>
   <li>item 10</li>
</ul>
<li> item 11</li>
<ul>
   <li>item 12</li>
</ul>
Obviously i wanted the 11th item to be rendered inside the third set of UL tags.

Here's the XSLT that rendered this:

<?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"
    exclude-result-prefixes="msxml umbraco.library">

<xsl:output method="xml" omit-xml-declaration="yes"/>
<xsl:param name="currentPage"/>
<xsl:variable name="imagesPerRow" select="6"/>
<!-- =============================================================== -->

<xsl:template match="/">
    <!-- for information on configuring the jquery lightbox, go to -->
    <!-- http://leandrovieira.com/projects/jquery/lightbox/ -->

    <!-- replace this with a real jquery reference when the api is ready -->
    <xsl:value-of select="umbraco.library:AddJquery()"/>
    <xsl:value-of select="umbraco.library:RegisterJavaScriptFile('jQueryLightbox', '/scripts/jquery.lightbox-0.5.min.js')"/>
    <xsl:value-of select="umbraco.library:RegisterJavaScriptFile('runwayGallery', '/scripts/runway.gallery.js')"/>
    <xsl:value-of select="umbraco.library:RegisterStyleSheetFile('jQueryLightboxCss', '/css/jQueryLightbox.css')"/>
    <xsl:value-of select="umbraco.library:RegisterStyleSheetFile('runwayGalleryCss', '/css/RunwayGallery.css')"/>

    <!-- 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' and data [@alias = 'numberOfItemsInStock']  &gt; 0]"> -->
    <xsl:for-each select="$currentPage/node [data [@alias = 'numberOfItemsInStock']  &gt; 0]">
    <xsl:sort select="@nodeName" order="ascending"/>
        <!-- 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 -->
        <li class="{position()}">
            <a href="/umbraco/ImageGen.aspx?image={data [@alias = 'umbracoFile']}&amp;constrain=true&amp;width=700&amp;height=500" class="lightbox" title="{@nodeName}">
                <img src="{concat(substring-before(data [@alias='umbracoFile'],'.'), '_thumb.jpg')}"/>
                <br/>
                <b><xsl:value-of select="@nodeName"/></b>
                <br/><br/>
                <span style="display: block; text-align: left;">
                    Prijs: € <xsl:value-of select="data [@alias='price']"/>
                    Status: <xsl:value-of select="data [@alias='status']"/>
                    <!--
                        Aantal op voorraad: <xsl:value-of select="data [@alias='numberOfItemsInStock']"/>
                    -->
                </span>
            </a>
        </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>


    <script type="text/javascript">
        $(function() {
            $('.nitroGallery a:rel:lightbox').lightBox({
                imageLoading: '/css/jQueryLightboxImages/loading.gif',
                imageBlank: '/css/jQueryLightboxImages/blank.gif',
                imageBtnClose: '/css/jQueryLightboxImages/close.gif',
                imageBtnPrev: '/css/jQueryLightboxImages/prev.gif',
                imageBtnNext: '/css/jQueryLightboxImages/next.gif'
            });
        });
    </script>

</xsl:template>

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

</xsl:stylesheet>


Can somebody please tell what is going wrong here and how i should correct it? Thanks in advance!