We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 22969
    • 158 Posts
    Hi all,

    Wondered if anyone could help, im building my new design agency website and in the portfolio section I really want visitors to be able to navigate between a section of child documents (project overview pages) using just left and right arrows and for it to "loop" so they can constantly click the right arrow for instance, is this simple to do??

    Heres an example - http://www.mynameischris.co.uk/geotech-holding/ (notice the arrows top right)

    Any advice would be great!

    Brett
      • 22969
      • 158 Posts
      Anyone else got any ideas?? Im stumped!
        • 23018
        • 353 Posts
        I suppose you could build that with getresources and getpage.

        This is a WILD guess, but try to use a conditional output filter in "pageNavOuterTpl".

        I suppose it look like this now:

        [[+prev]][[+next]]


        Try this instead:

        [[+prev]]
        [[+last:is=`[[+idx]]`:then=`
        <a href="url_to_first_child"><img class="right" src="../arrow-right.svg" alt="right"></a>
        `:else=``]]
        [[+next]]
        


        I'm not sure if

        a. output filters get parsed by getpage,
        b. we can use getresources placeholdes inside the template chunk.

        but you should give it a try.

        Apart from that the only problem I see here is to get the url of the first child. If it is fixed, just add [[~id]] to the href attribute. If it is not fixed you'll need a snippet.

        Regards,

        pepebe [ed. note: pepebe last edited this post 10 years, 2 months ago.]
          Homepage: pepebe.de | MODX snippets (and other stuff) at github: https://gist.github.com/pepebe
          • 4172
          • 5,888 Posts
          should be possible with siblingnav, not sure about the infinite looping, but I'm sure it could be added as an option.
            -------------------------------

            you can buy me a beer, if you like MIGX

            http://webcmsolutions.de/migx.html

            Thanks!
            • 22969
            • 158 Posts
            Quote from: pepebe at Feb 24, 2014, 03:35 PM
            I suppose you could build that with getresources and getpage.

            This is a WILD guess, but try to use a conditional output filter in "pageNavOuterTpl".

            I suppose it look like this now:

            [[+prev]][[+next]]


            Try this instead:

            [[+prev]]
            [[+last:is=`[[+idx]]`:then=`
            <a href="url_to_first_child"><img class="right" src="../arrow-right.svg" alt="right"></a>
            `:else=``]]
            [[+next]]
            


            I'm not sure if

            a. output filters get parsed by getpage,
            b. we can use getresources placeholdes inside the template chunk.

            but you should give it a try.

            Apart from that the only problem I see here is to get the url of the first child. If it is fixed, just add [[~id]] to the href attribute. If it is not fixed you'll need a snippet.

            Regards,

            pepebe
            Hi pepebe,

            Thanks for your response, im not the most technical could you possible expand on it in how I use it with getresources? I have that package installed?

            Thank you!
              • 23018
              • 353 Posts
              Even though I think you should give siblingnav a try (Bruno17 is ALWAYS right, believe me...), I believe that it can also be done with getResources.

              Today or tomorrow I can post you a solution for your problem. I might not be the most elegant way to do it, but it will be easy to implement.

              Regards,

              pepebe
                Homepage: pepebe.de | MODX snippets (and other stuff) at github: https://gist.github.com/pepebe
                • 22969
                • 158 Posts
                Thank you so much pepebi, really appreciate the help!! Look forward to seeing your post.

                Brett
                  • 23018
                  • 353 Posts
                  Done.

                  Download and install getResources from the repository.

                  First create a chunk called "currentIdx" with the following content:
                  [[*id:is=`[[+id]]`:then=`[[+idx]]`:else=``]]
                  


                  Next add the following lines to your template:
                              <!-- This snippet will return the index number of the current resource. 
                                      The first results has an index number of 0 
                              -->
                              [[getResources?
                                  &parents=`[[*parent]]`
                                  &idx=`0`
                                  &tpl=`currentIdx`
                                  &limit=`999`
                                  &depth=`1`
                                  &showHidden=`1`
                                  &sortby=`menuindex`
                                  &sortdir=`asc`
                                  &toPlaceholder=`currentIdx`
                              ]]
                  
                             <!-- This will return individual placeholders 
                                     for each sibling in the list of results  
                              -->
                              [[getResources?
                                  &parents=`[[*parent]]`
                                  &idx=`0`
                                  &tpl=`@INLINE <a href="[[~[[+id]]]]">[[+pagetitle]]</a>`
                                  &limit=`999`
                                  &depth=`1`
                                  &showHidden=`1`
                                  &sortby=`menuindex`
                                  &sortdir=`asc`
                                  &toSeparatePlaceholders=`resultno_`
                              ]]
                  


                  You can grab the results using this syntax:

                  <!-- The first resource -->
                  [[+resultno_0]]
                  
                  <!-- The nth resource -->
                  [[+resultno_nth]]
                  
                  <!-- The previous resource --> 
                  [[+resultno_[[+currentIdx:strip:decr]]]]
                  
                  <!-- The current resource -->
                  [[+resultno_[[+currentIdx:strip]]]]
                  
                  !-- The next resource -->
                  [[+resultno_[[+currentIdx:strip:incr]]]]
                  
                  <!-- The last resource -->
                  [[+resultno_[[+total:decr]]]] 
                  


                  Now its only a question of asking politely for the links you need:

                              <ul>
                                  <!-- Either a link to the resource before the current one OR to the last resource in the list of results -->
                                  [[+currentIdx:strip:is=`0`:then=`
                                      <!-- Last resource -->
                                      <li class="last">[[+resultno_[[+total:decr]]]]</li>
                                  `:else=`
                                      <!-- Previous resource -->
                                      <li class="prev">[[+resultno_[[+currentIdx:strip:decr]]]]</li>
                                  `]]
                                  
                                   <!-- The current resource. I don't think you'll need that one -->
                                      <li class="current">[[+resultno_[[+currentIdx:strip]]]]</li>
                                  
                                  <!-- Either a link to the next resource OR the first resource in the list of results -->
                                  [[+currentIdx:is=`[[+total:decr]]`:then=`
                                      <!-- First resource -->
                                      <li class="first">[[+resultno_0]]</li>
                                  `:else=`
                                      <!-- Next resource -->
                                      <li class="next">[[+resultno_[[+currentIdx:strip:incr]]]]</li>
                                  `]]
                              </ul>
                  


                  Hint: You can freely change the html syntax to fit your needs.

                  I have tested this code on one of my test accounts and it seems to be working as intended. Try it for yourself and let me know if there are any problems.

                  As both getResources calls don't use template variables and other heavy-weight stuff, I don't think this solution has any serious performance impact as long as you don't post hundreds of portffolios.

                  Regards,

                  pepebe [ed. note: pepebe last edited this post 10 years, 2 months ago.]
                    Homepage: pepebe.de | MODX snippets (and other stuff) at github: https://gist.github.com/pepebe
                    • 22969
                    • 158 Posts
                    Thank you pepebo, just been trying and mostly works but the link itself isnt showing up?

                    	<ul>
                                    <!-- Either a link to the resource before the current one
                     OR to the last resource in the list of results -->
                                    
                                        <li class="prev"><a href="">Webb Jenkins Estate Agency</a></li>
                                    
                                    
                                     <!-- The current resource. I don't think you'll need
                     that one -->
                                        <li class="current"><a href="">WightHomes.com Estate Agency</a></li>
                                    
                                    <!-- Either a link to the next resource OR the first
                     resource in the list of results -->
                                   
                     <li class="next"><a href="">Brading Roman Villa</a></li>
                                </ul>
                    
                      • 23018
                      • 353 Posts
                      Quote from: peekaboo at Feb 27, 2014, 03:56 PM
                      Thank you pepebo, just been trying and mostly works but the link itself isnt showing up?

                      	<ul>
                                      <!-- Either a link to the resource before the current one
                       OR to the last resource in the list of results -->
                                      
                                          <li class="prev"><a href="">Webb Jenkins Estate Agency</a></li>
                                      
                                      
                                       <!-- The current resource. I don't think you'll need
                       that one -->
                                          <li class="current"><a href="">WightHomes.com Estate Agency</a></li>
                                      
                                      <!-- Either a link to the next resource OR the first
                       resource in the list of results -->
                                     
                       <li class="next"><a href="">Brading Roman Villa</a></li>
                                  </ul>
                      

                      I smell gremlins!

                      Change your tpl in the second getResources call from

                      &tpl=`@INLINE <a href="[[~[[+id]]]]">[[+pagetitle]]</a>`


                      to

                      &tpl=`@INLINE [[+id]] - [[~[[+id]]]]`


                      What do you get?

                      Regards,

                      pepebe


                      Disclaimer: Neither pepebi nor pepebo have been harmed in the production of this coding lesson... [ed. note: pepebe last edited this post 10 years, 2 months ago.]
                        Homepage: pepebe.de | MODX snippets (and other stuff) at github: https://gist.github.com/pepebe