Copied to clipboard

Flag this post as spam?

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


  • Eran 292 posts 436 karma points
    Jul 08, 2010 @ 01:14
    Eran
    0

    Stuck With Display of gallery items..

    hello, i tried a lot of solutions but without any success yet..

    i have Projects node and under it project items. in the projects template i have XSLT macro that displays the project list, like a image gallery.(each page  need to contains 6 projects: 2 rows with 3 projects each.)

    because i'm using css and jquery (for pagegnation), i need to travel on all the projects nodes and to determine exactly where i am in the loop:

    1. i need to know in which column i am (left,middle,right)

    2. i need to know in which row i an (top or bottom).

    3. i need to know in which page i am (every 6 projects it is a new page).

    i succeded to acomplish the first mission using this loop:

     <xsl:for-each select="$currentPage/node [@nodeTypeAlias = 'project']">
        <xsl:if test="position() mod $numberOfRecordsPerRow = 1">
           <!-- left column -->
        </xsl:if>
        <xsl:if test="position() mod $numberOfRecordsPerRow = 2">
           <!-- middle column -->
        </xsl:if>
        <xsl:if test="position() mod $numberOfRecordsPerRow = 0">
           <!-- right column -->
        </xsl:if>
     </xsl:for-each>

    but inside that loop i need to determine if i'm in the top or bottom row, and if i'm in a new page (6 projects per page).

    how can i do that?? i spent a lot of time trying many options. if someone can help it will be awsome.

    thanks!

     

  • David Conlisk 432 posts 1008 karma points
    Jul 08, 2010 @ 10:50
    David Conlisk
    1

    To work out what page you are on, you could use a page variable in your querystring, e.g. page=3

    The in your xslt you read the page number, and use that to determine which set of results to show, i.e. (defaulting page number to 1 if no querystring value specified):

    Note: totally untested code but should get you on the right track!

    <xsl:variable name="page">
        <xsl:choose>
          <xsl:when test="umbraco.library:RequestQueryString('page') != ''">
            <xsl:value-of select="umbraco.library:RequestQueryString('page')"/>
          </xsl:when>
          <xsl:otherwise>
            <xsl:text>1</xsl:text>
          </xsl:otherwise>
        </xsl:choose>
      </xsl:variable>

    Then in your loop:

    <xsl:if test="position() &gt; ($page-1 * 6) and position &lt;= ($page * 6)>
         <!-- you are on the current page of results - insert your column code here -->
    <xsl:if test="position() == ($page-1 * 6) + 1)">
    <!-- top row -->
    </xsl:if>
    <xsl:if test="position() == ($page * 6)">
    <!-- bottom row -->
    </xsl:if>

    </xsl:if>
  • David Conlisk 432 posts 1008 karma points
    Jul 08, 2010 @ 10:52
    David Conlisk
    0

    P.S. I would suggest creating a local variable to store the number of items to display per page, so you can easily update it, e.g.

    <xsl:variable name="ITEMS_PER_PAGE" select="6"/>

    Then you can update the number of items to display per page with a single update, rather than a global replace :)

  • Eran 292 posts 436 karma points
    Jul 08, 2010 @ 15:28
    Eran
    0

    thanks, i wanted to make that with client side pagination and not server side. i have some new idea and i need to try it. ifd i will not succeed, i will post here simpler example and maybe my problem will be more clear to you.

    thanks.

  • David Conlisk 432 posts 1008 karma points
    Jul 08, 2010 @ 15:35
    David Conlisk
    0

    You can still use the same idea client-side - instead of using a querystring to pass about the current page number, use your jquery. The logic above should still work - you could start a new div every six items and give it an id, e.g. page1, page2, etc. Then your jquery just needs to show/hide the correct divs each time a next/prev button is clicked.

    Good luck with it! Look forward to seeing your final solution.

  • Eran 292 posts 436 karma points
    Jul 15, 2010 @ 22:13
    Eran
    0

    hello,

    at the end i managed to solve the problem by using some trick that i saw here in the forum.
    after i figured out that i must use modulu to know "where i am" in the grid , the main problem was that i have to open and close DIV's in different positions in the loop, and that cause XSL errors. so i defined variables like this:

    <xsl:variable name="documentTypeAlias" select="string('Project')"/>
    <xsl:variable name="numberOfRecords" select="number(count($currentPage/node [@nodeTypeAlias = $documentTypeAlias and string(data [@alias='umbracoNaviHide']) != '1']))" />
    <xsl:variable name="numberOfRecordsPerRow" select="number(3)"/>
    <xsl:variable name="openDivLeftCol">&lt;div class='column-left'&gt;</xsl:variable>
    <xsl:variable name="openDivMidCol">&lt;div class='column-middle'&gt;</xsl:variable>
    <xsl:variable name="openDivRightCol">&lt;div class='column-right'&gt;</xsl:variable>
    <xsl:variable name="openDivTopRow">&lt;div class='row-top'&gt;</xsl:variable>
    <xsl:variable name="openDivBottomRow">&lt;div class='row-bottom'&gt;</xsl:variable>
    <xsl:variable name="closeDiv">&lt;/div&gt;</xsl:variable>
    <xsl:variable name="openList">&lt;li&gt;</xsl:variable>
    <xsl:variable name="closeList">&lt;/li&gt;</xsl:variable>

    and use them in the xsl like that:

        <ul>
        <xsl:for-each select="$currentPage/node [@nodeTypeAlias = $documentTypeAlias and string(data [@alias='umbracoNaviHide']) != '1']">
         
            <xsl:if test="position() mod $numberOfRecordsPerRow = 1">         
              <xsl:choose>
                <xsl:when test="position() mod 2 = 0">
                  <xsl:value-of select="$closeDiv" disable-output-escaping="yes"/>
                  <xsl:value-of select="$openDivBottomRow" disable-output-escaping="yes"/>
                  <xsl:value-of select="$openDivLeftCol" disable-output-escaping="yes"/>
                </xsl:when>           
                <xsl:otherwise>
                  <xsl:choose>
                    <xsl:when test="position() &gt; 1">
                      <xsl:value-of select="$closeDiv" disable-output-escaping="yes"/>
                      <xsl:if test="position() mod 6 = 1">
                        <xsl:value-of select="$closeList" disable-output-escaping="yes"/>
                        <xsl:value-of select="$openList" disable-output-escaping="yes"/>
                      </xsl:if>
                    </xsl:when>
                    <xsl:otherwise>
                      <xsl:value-of select="$openList" disable-output-escaping="yes"/>
                    </xsl:otherwise>
                  </xsl:choose>
                  <xsl:value-of select="$openDivTopRow" disable-output-escaping="yes"/>
                  <xsl:value-of select="$openDivLeftCol" disable-output-escaping="yes"/>
                </xsl:otherwise>
              </xsl:choose>
             
            </xsl:if>
            <xsl:if test="position() mod $numberOfRecordsPerRow = 2">
              <xsl:value-of select="$openDivMidCol" disable-output-escaping="yes"/> 
            </xsl:if>
            <xsl:if test="position() mod $numberOfRecordsPerRow = 0">
              <xsl:value-of select="$openDivRightCol" disable-output-escaping="yes"/>
            </xsl:if>
           
            <!-- Print the project info -->
            <h3>
              <a href="{umbraco.library:NiceUrl(@id)}">
                <xsl:value-of select="./data [@alias = 'projectName']" disable-output-escaping="yes"/>
              </a>
            </h3>

          <xsl:value-of select="$closeDiv" disable-output-escaping="yes"/>
        </xsl:for-each>
        <xsl:value-of select="$closeList" disable-output-escaping="yes"/>
        </ul>

    thanks

     

Please Sign in or register to post replies

Write your reply to:

Draft