[Plugin: NextGEN Gallery] Navigate through ALL images in gallery not just page

It requires some deeper changes in nggCreateGallery and as well inside the template (gallery.php). At least you need to enable two in-visible div’s before and after the paged content with the other images, which should not be shown up, but should be useable for the effect (Thickbox, Lightbox etc.)

Thanks Alex. I’m going to look closer and see if I can make a revision to the code. I’d like to include a checkbox or radio button in the configuration that will select one behavior or the other. I’ll share what I come up with!

Hey Alex,

I’ve been looking over the code for some time now, and I’m having trouble finding the routine that creates the prev and next links that show in the thick box. I’d been looking at the create_navigation routine in core.php, but now that I’ve looked closer, that appears to just handle the navigation for the pages not the navigation for the individual images.

Am I missing something?

Nevermind… I figured it out. Explanation to follow…

Caveats: I’ve only tested this with the Thickbox, and I have not beat it to death, so your mileage may vary…

Desire: Set max number of thumbnail images to be displayed for a gallery to some reasonable number to enable pagination, BUT to be able to navigate through ALL of the images (not just a page worth) with the Thickbox previous and next links.

Theory: From a quick review of THickbox documentation I found that the thickbox code makes the links based on the presence of the following:

* Create a link element (< a href >)
* Give the link a class attribute with a value of “thickbox” (class=”thickbox”)
* Provide a path in the href attribute to an image file (.jpg .jpeg .png .gif .bmp)
* Give each link element the same rel element and value. (Example: rel=”gallery-plants”)

The last one is the important one. The thickbox determines what position in the array it’s in and the number of elements in the array by the number of links with the same rel element and value.

The problem is, the current version of the plugin strips out everything from a $picturelist array except the images that should be displayed on a given page.

My solution: Change the code so that the $picturelist array is not changed (ie has the full list of gallery images) and select the ones that the thumbnail should be visible for based on the $start and $maxelements variables that already exist. Specifically, I added an imageHidden variable to the nggImage class, set it to hidden or not in nggCreateGallery, and then test that value in gallery.php. If hidden, the DIV for the associated thumbnail is hidden.

It seems to work with a minimum of modification.

In my next post, I’ll give specific instructions for those who wish to duplicate my efforts, or… I suppose, if you ask real nice, I’ll email the modified files. ??

Specific modifications:

#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;  	// An indicator to 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!

By the way… it looks like step three could be altered by making a gallery template, but I couldn’t get that to work, so I just modified gallery.php…

Thanks for the fix, I will have a look to implement this to core, so that a new template could be added and you didn’t need to change the core files again.

BTW : what for problem do you have with your template ?

Thanks for looking Alex. Let me know if I can help. I expect some people like the navigation function the way it is, so I think a configuration option that allows you to choose it would be a good way to implement it. It doesn’t seem any harder than:

if(original_operation)
{
array_splice…
array_splice…
}
//else must want “modified” operation

I just haven’t had a chance to figure out the logistics of adding another configuration option.

As for the gallery, from looking at the code, it appears that I should be able to add a file called (for example) gallery-modified.php and make the desired gallery changes in there. I did that first by coping gallery.php > gallery-modified.php and making the changes, but the plugin seemed to ignore gallery-modified.php. I don’t know if I had it in the right place (the view subdir) or if there was a config option somewhere that I missed to tell it to use the new gallery-modified, but it didn’t work for me. I didn’t really try to troubleshoot it very hard though.

Thanks for a great plugin! Let me know how I can help further.

This is exactly what I have been looking for!!! Thanks to both of you! Would it be a totally different story if I want to implement it for Lightbox?

@eoracle…

The difference in the calls between Lightbox and Thickbox are handled by the plugin. My modification above simply makes the thumbnails visible or not. It is the presence of the links whether visible or not that makes both Lightbox and Thickbox determine the number of images and such for navigation, and that is unchanged with my modification. I think it will work fine for Lightbox as well.

Having said that, I tried switching to lightbox here to test it, and when I click on the thumbnail, it just opens the image as a new page with no effect, so it doesn’t work here. Note though that I’ve never used Lightbox here, so I can’t even be sure it worked before the mods! YMMV. If it were me, I’d backup the original three files to be modified and go for it. Putting it back should take about 10 seconds if it doesn’t work.

Let us know what you decide to do.

Steve

To use a “modified” template you have two option :

a) copy gallery.php to your theme folder :

{wordpress dir}\wp-content\themes\your theme directory\nggallery\gallery.php

then you can change the gallery.php file to whatever you need, without having trouble during a plugin upgrade

b) adding your own “new” template :

{wordpress dir}\wp-content\themes\your theme directory\nggallery\gallery-modified.php

this get called with the shortcode [nggallery id=x template=modified]

Thanks Alex. That’s why using a modified gallery didn’t work for me. Not only was my file not in the right place, but I didn’t know about the shortcode change either. I told you I didn’t try too hard on that ??

For those following along, if you follow Alex’s instructions you can make your own gallery template and put the step 3 changes in there rather than modifying the original if you want.

@alex and @sweigold

Superb!!! Great job!! It worked like a charm for lightbox!! What I did was following sweigold’s 3 steps plus alex’s instruction to make step 3 into the theme’s folder. It loads all the pictures from all pages! ??

@sweigold, did you clear the browser cache first to make the mod work for lightbox? Just a thought.

One thing it is acting weird though, is that after the modification, although I have “Number of images per page” set to 20, each page will show 21 pictures. If I change the “Number of images per page” to 12, it will show 13 pictures each page. So I need to always set it to N-1 pictures to make it the number that I want. Need to fix something in the array?

Thanks again for the great mod!!!

AW CRAP! Sorry EOracle, I must have pasted my fix from the wrong file when I did. That was a bug in my mod that I fixed, it just didn’t get reflected here. In step one, find the line:

if (($index < $start) || ($index > ($start + $maxElement)))

That should really be:

if (($index < $start) || ($index >= ($start + $maxElement)))

Note the >= after the second $index. Sorry! I tried to go back and edit that post, but it won’t let me…