Nextgen Gallery Image Navigation

Hi Everyone!

I’ve decided I’m going to start adding some other geeky stuff here too.  I’ve been using WordPress lately as a content management system (CMS) for several of my websites, and all I can say is, I’m in love!  I’ve also found a fabulous plugin for images for WordPress called Nextgen Gallery.  I’ve been using both through several versions now and am currently on WordPress 2.7 and Nexten Gallery 1.0.2.

In case you’re interested in WordPress, you can find it here, and Nextgen Gallery is here.  Lots of examples at the Nextgen site as well.

One of the small changes I’d like made in Nextgen Gallery is the way the navigation through images is done if you use pagination.  Currently if you set max images to something other than 0, it limits the number of thumbnails displayed to that number.  I happen to like 4 because it doesn’t crowd the posts with a million thumbnails.  When you click on a thumbnail, it opens a Thickbox with the image.  The problem is, the Thickbox includes previous and next links to move through the images, but they only navigate through the limited number of images on that page and not the whole gallery.

I want them to navigate through the whole gallery so you don’t have to switch back and forth and navigate through both the pages AND the images.  Unfortunately this isn’t a feature that’s included.  In a previous version of Nextgen, 0.99, I followed some online instructions to modify the plugin to get it to do what I wanted.  If you’re using that version, you can find those instructions here.  Unfortuantely, they don’t work for the newest version (1.0.2) because of significant changes to the applicable routines.  So… I got to work.  To make a long story a bit shorter, here are the modification instructions:

#1 – In nggfunctions.php

Find the lines that look like:

// remove the element if we didn't start at the beginning
if ($start > 0 ) array_splice($picturelist, 0, $start);

// return the list of images we need
array_splice($picturelist, $maxElement);

Comment them out or delete them. Just below where they are (or were) add:

//Don't modify the array.  We now want to pass all of the picture list
//to the output... but not all are visible as thumbnails.
//TODO:  make a configuration option to select or deselect this
//behavior

foreach ($picturelist as $index => $value)
{
if (($index < $start) || ($index >= ($start + $maxElement)))
  $picturelist[$index]->imageHidden = 1;  //if out of range,
                                          //hide image
else
  $picturelist[$index]->imageHidden = 0;  //otherwise, show it
		}

#2 – in /lib/image.php find the the following about line 18:

var $href = '';		// A href link code

Below it, add:

var $imageHidden = 0;  	// show or not show thumbnail

#3 – lastly, in /view/gallery.php find these lines, starting about line 37:

<!-- Thumbnails -->
<?php foreach ($images as $image) : ?>

<div id="ngg-image-<?php echo $image->pid ?>"
class="ngg-gallery-thumbnail-box">

Delete the <div.. tag. In it’s place, paste this:

<div id="ngg-image-<?php echo $image->pid ?>"
class="ngg-gallery-thumbnail-box"
<?php
  if ( $image->imageHidden == 1 )
  {
    echo " style='display: none' ";
  }
?>
>

Be careful about the closing bracket on the replacement tag!

That should do it.  It’s working on this site anyway!  If you want to make the changes but are afraid of doing so, I’d be happy to email you the necessary files if you say please 🙂

You can also follow the discussion on this subject on the WordPress forums here.   Enjoy!

Update 12/29 – another WordPress user reports the mod is working fine with Lightbox as well.

Steve