Question

I have this code that creates the navigation for a slideshow. It works just fine except that one of the variables is rendering the code in the wrong place. As you can see below $imgCount (3 of 3) should be inside <div class="next-prev"> </div> however it’s showing up before this div.

Why is it moving itself outside the div that it’s coded inside?

Here’s how I expect it to output:

<div class="slideshow-nav">
    <div>
         <div class="next-prev">
             <a href="/slideshow-one/2/">&larr; Previous  3 of 3  </a><a href="../">Back to Slide One</a>
         </div>  
    </div>
</div>

Here’s how it is outputting:

<div class="slideshow-nav">
    <div>3 of 3
         <div class="next-prev">
             <a href="/slideshow-one/2/">&larr; Previous  </a><a href="../">Back to Slide One</a>
         </div>  
    </div>
</div>

Here’s the code that sets it up:

<div class="slideshow-nav">
    <div class="img-count">
        <?php function img_count() {
            global $page, $numpages;
            echo "$page of $numpages"; 
            } ?>
      </div>
     <div>
        <?php 
            global $page, $numpages;
                    $imgCount = img_count();
                if ($page < 2)
                    $next = '<span class="start-ss">Go</span>';
                else
                    $next = ' Next &rarr;';
                if ($page == $numpages)
                    $previous = '&larr; Previous  ' .$imgCount. ' <a href="../">Back to Slide One</a>';
                else
                    $previous = '&larr; Previous  ...';
            wp_link_pages(      
                array(
                'before' => '<div class="next-prev">',
                'after' => '</div>',
                'next_or_number' => 'next',
                'nextpagelink' => $next,
                'previouspagelink' => $previous,
                )); 
            ?>  
       </div>
</div>

Answer 1

Change echo to return in your function, e.g.

function img_count() {
    global $page, $numpages;
    return "$page of $numpages"; 
}