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

     

  • 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