Hi guys,

I have a question that I thought it was simple but it come out its not.

I have a gallery . How can I put on each photo a link to the prev and next one?

sorry i can figure this out :p

THanks

[cheesypoof]

Use @KK's solution below!

If I am correct in thinking you want to place these links on the page view, then this is one way to do it:

Code: Select all

<cms:set page_name=k_page_name />

<cms:pages>
    <cms:if k_page_name=page_name><cms:set page_count=k_count scope='global' /></cms:if>
</cms:pages>

<cms:pages>
    <cms:if k_count="<cms:sub page_count '1' />"><a href="<cms:show k_page_link />">Previous</a></cms:if>
    <cms:if k_count="<cms:add page_count '1' />"><a href="<cms:show k_page_link />">Next</a></cms:if>
</cms:pages>

The 'set' tag allows us to use the 'page_name' variable inside of the 'pages' tag that follows. In the first 'pages' tag we find out what order the current page is at, so that in the next 'pages' tag we can use that information to find the previous and next page.

[KK]

@cheesypoof
I modified your solution a little to use just one 'pages' loop instead of two. Here it is -

Code: Select all

<cms:set cur_page=k_page_name 'global' />
<cms:set prev_page='' 'global' />
<cms:set next_page='' 'global' />
<cms:set found_cur_page='0' 'global' />

<cms:pages skip_custom_fields='1'>
   <cms:if found_cur_page=='0' >
      <cms:if k_page_name==cur_page >
         <cms:set found_cur_page='1' 'global' />
      <cms:else />
         <cms:set prev_page=k_page_link 'global' />
      </cms:if>
   <cms:else />
      <cms:if next_page==''>
         <cms:set next_page=k_page_link 'global' />
      </cms:if>
   </cms:if>
</cms:pages>

<cms:if prev_page>
   <a href="<cms:show prev_page />">Prev</a>
</cms:if>
<cms:if next_page>
   <a href="<cms:show next_page />">Next</a>
</cms:if>

[KK]

One more solution -
This one will work from Couch 1.3 onwards.

Looping through all the pages to find the next and prev is likely to take a performance hit if the number of pages is large. To avoid this we use PHP in this solution.

Code: Select all

<cms:php>
   global $CTX;
   $page_ids = explode( ",", "<cms:pages ids_only='1' />" );
   $cur_page_id = "<cms:show k_page_id />";
   $pos = array_search( $cur_page_id, $page_ids ); 
   if( $pos!==FALSE ){
      if( $pos>0 ){
         // Prev page id
         $prev_page_id = $page_ids[$pos-1];
         $CTX->set( 'prev_page_id', $prev_page_id, 'global' );
      }
      if( $pos<count($page_ids)-1 ){
         // Next page id
         $next_page_id = $page_ids[$pos+1];
         $CTX->set( 'next_page_id', $next_page_id, 'global' );
      }
   }
</cms:php>

<cms:if prev_page_id >
   <cms:pages id=prev_page_id skip_custom_fields='1'>
      <a href="<cms:show k_page_link />">Prev</a>
   </cms:pages>
</cms:if>
<cms:if next_page_id >
   <cms:pages id=next_page_id skip_custom_fields='1'>
      &nbsp;<a href="<cms:show k_page_link />">Next</a>
   </cms:pages>
</cms:if>

Hope this helps.

ADDENDUM:
Some related links of interest:
viewtopic.php?f=2&t=21
viewtopic.php?f=4&t=7457
viewtopic.php?p=16084#p16084

There appears to be a major flaw with this otherwise speedy loading code: you can't reorder pages without messing up the navigation

I just found this bug today, I reordered my gallery and pages that should have had next links didn't have them, others were missing previous page links, and some even miss all navigation links.

Any ideas on what can be done to fix this?

One more solution -
This one will work from Couch 1.3 onwards.

Looping through all the pages to find the next and prev is likely to take a performance hit if the number of pages is large. To avoid this we use PHP in this solution.

Code: Select all

<cms:php>
   global $CTX;
   $page_ids = explode( ",", "<cms:pages ids_only='1' />" );
   $cur_page_id = "<cms:show k_page_id />";
   $pos = array_search( $cur_page_id, $page_ids ); 
   if( $pos!==FALSE ){
      if( $pos>0 ){
         // Prev page id
         $prev_page_id = $page_ids[$pos-1];
         $CTX->set( 'prev_page_id', $prev_page_id, 'global' );
      }
      if( $pos<count($page_ids)-1 ){
         // Next page id
         $next_page_id = $page_ids[$pos+1];
         $CTX->set( 'next_page_id', $next_page_id, 'global' );
      }
   }
</cms:php>

<cms:if prev_page_id >
   <cms:pages id=prev_page_id skip_custom_fields='1'>
      <a href="<cms:show k_page_link />">Prev</a>
   </cms:pages>
</cms:if>
<cms:if next_page_id >
   <cms:pages id=next_page_id skip_custom_fields='1'>
      &nbsp;<a href="<cms:show k_page_link />">Next</a>
   </cms:pages>
</cms:if>

Hope this helps.

ADDENDUM:
Some related links of interest:
viewtopic.php?f=2&t=21
viewtopic.php?f=4&t=7457
viewtopic.php?p=16084#p16084

I just triggered this error while adding new images to an old gallery folder. The very last new image has no next link (when it should).

Some debugging info:

Using the gallery template, each gallery is it's own folder: gallery>topical gallery>image files.

I'm restricting the navigation to the current pages folder - yet when I turn that off, even the global navigation is all messed up.

[KK]

There appears to be a major flaw with this otherwise speedy loading code: you can't reorder pages without messing up the navigation

Could you please let us know exactly how you reordered the pages?

Also, please post the exact code you are using.

Thanks.

Here is the code. I only call the PHP once, then I use the link generating code many times after for touchscreen and keyboard navigation links and some image preloading scripts. Listed below is the first navigator. The link ordering issue is the same across all places I've implemented the code.

Code: Select all

<cms:php>
   global $CTX;
   $page_ids = explode( ",", "<cms:pages ids_only='1' />" );
   $cur_page_id = "<cms:show k_page_id />";
   $pos = array_search( $cur_page_id, $page_ids ); 
   if( $pos!==FALSE ){
      if( $pos>0 ){
         // Prev page id
         $prev_page_id = $page_ids[$pos-1];
         $CTX->set( 'prev_page_id', $prev_page_id, 'global' );
      }
      if( $pos<count($page_ids)-1 ){
         // Next page id
         $next_page_id = $page_ids[$pos+1];
         $CTX->set( 'next_page_id', $next_page_id, 'global' );
      }
   }
</cms:php>



    

<div id="navigator" >

<div  align="center" class="ui">

<!-- start previous arrow -->

    <div class="chv">
        <div class="table full-width full-height">        
            <div class="table-cell align-bottom">
         <cms:if prev_page_id >
   <cms:pages id=prev_page_id folder=k_page_foldername skip_custom_fields='1'> <a href="<cms:show k_page_link />" class="transition"> <div id="linkinner" class="desktopbutton"><img src="<cms:show k_site_link />uparrow.png" ></img> </div>   <div id="linkinner" class="tabletbutton"><img src="<cms:show k_site_link />leftarrow.png" ></img> </div></a></cms:pages></cms:if>
            </div>
        </div>
    
<!-- start info/gallery toggle button -->      
        
        <div class="table full-width full-height">        
            <div class="table-cell align-bottom align-right">
           <div id="infogallerytoggle">
               <div id="informationbutton"><div id="linkinner" class="desktopbutton"><img src="<cms:show k_site_link />information.png" ></img> </div>   <div id="linkinner" class="tabletbutton"><img src="<cms:show k_site_link />information.png" ></img> </div></div><div id="gallerybutton">  <div id="linkinner"><img src="<cms:show k_site_link />gallery.png" ></img> </div></div> </div>
           </div>
        </div>
        
        
<!-- start info panel toggle button -->

      <div class="table full-width full-height">        
            <div class="table-cell align-middle">
               <div id="phonegallerytogglewrapper">  <div id="informationbuttonphone"><div id="linkinner" class="desktopbutton"><img src="<cms:show k_site_link />information.png" ></img> </div>   <div id="linkinner" class="tabletbutton"><img src="<cms:show k_site_link />information.png" ></img> </div></div><div id="gallerybuttonphone">  <div id="linkinner"><img src="<cms:show k_site_link />gallery.png" ></img> </div></div> </div> <div id="infopannelbutton"><div id="infoclose"><div id="linkinner" class="desktopbutton"><img src="<cms:show k_site_link />scaleup.png" ></img> </div>   <div id="linkinner" class="tabletbutton"><img src="<cms:show k_site_link />scaleup.png" ></img> </div></div></div>
            </div>
        </div>
        
        
<!-- start NEW SHARE BUTTON button -->    
        
        <div class="table full-width full-height">        
            <div class="table-cell align-top align-left">
               
               <div id="sharebutton"> 
                  <div id="linkinner"><img src="<cms:show k_site_link />shareicon.png"></div> 
               </div> <!-- end of sharebutton div -->

            </div>
        </div>
        
        
<!-- start next arrow -->       
        
        <div class="table full-width full-height">        
            <div class="table-cell align-top">
                <cms:if next_page_id >
   <cms:pages id=next_page_id folder=k_page_foldername skip_custom_fields='1'> <a href="<cms:show k_page_link/>" class="transition"> <div id="linkinner" class="desktopbutton"><img src="<cms:show k_site_link />downarrow.png" ></img> </div>   <div id="linkinner" class="tabletbutton"><img src="<cms:show k_site_link />rightarrow.png" ></img> </div></a></cms:pages></cms:if>
            </div>
        </div>
        
        
        

        
        
    </div>
    
</div>
    
    
</div> <!-- END NAVIGATOR DIV -->

]Could you please let us know exactly how you reordered the pages?

The only way I can reorder is by changing the dates on the pages. There is no other way to reorder them that I know of.

Can we reorder the page ID array based on page date? I think that might be causing the issue, but not too sure, I'm a beginner with PHP at the moment.