WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] [Plugin: NextGEN Gallery] Navigate through ALL images in gallery not just page (54 posts)

  1. sweigold
    Member
    Posted 5 years ago #

    Nextgen Gallery 1.0.2

    Love the gallery Alex! Upgraded from 0.99. I had made a modification in that version from some information posted online. The modification made changes to nggfunctions and added a function and made some slight changes to the nggCreateGallery routine. The results allowed the user to use the previous and next links to move through all of the images in the gallery, not just those shown on a particular page. I have my number of images per page set to 4 because I don't want my posts overloaded with thumbnails. Some of my galleries have hundreds of images.

    I hoped that the new version would have added this type of navigation as a feature, but it doesn't. I've reviewed the new nggCreateGallery routine, and even tried to make some changes but it didn't work, so I guess I'll have to try harder.

    Has anyone else tried the modification on the newest version, or is there a feature in the new version to do this that I haven't seen yet?

    Thanks!
    Steve

  2. Alex Rabe
    Member
    Posted 5 years ago #

    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.)

  3. sweigold
    Member
    Posted 5 years ago #

    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!

  4. sweigold
    Member
    Posted 5 years ago #

    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?

  5. sweigold
    Member
    Posted 5 years ago #

    Nevermind... I figured it out. Explanation to follow...

  6. sweigold
    Member
    Posted 5 years ago #

    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. :-)

  7. sweigold
    Member
    Posted 5 years ago #

    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!

  8. sweigold
    Member
    Posted 5 years ago #

    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...

  9. Alex Rabe
    Member
    Posted 5 years ago #

    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 ?

  10. sweigold
    Member
    Posted 5 years ago #

    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.

  11. EOracle
    Member
    Posted 5 years ago #

    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?

  12. sweigold
    Member
    Posted 5 years ago #

    @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

  13. Alex Rabe
    Member
    Posted 5 years ago #

    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]

  14. sweigold
    Member
    Posted 5 years ago #

    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.

  15. EOracle
    Member
    Posted 5 years ago #

    @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!!!

  16. sweigold
    Member
    Posted 5 years ago #

    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...

  17. sweigold
    Member
    Posted 5 years ago #

    And no, I didn't clear the browser cache. Didn't think to. I may give that a try eventually, but I haven't been using lightbox, so since it's working for you I'm not going to worry to much about it right now :-)

  18. EOracle
    Member
    Posted 5 years ago #

    Thanks again sweigold! Yeap that fixed it. :) Now let me dig around and see if there are more "features" I want to put on the wishlist. ;)

    Cheers

  19. shinsui
    Member
    Posted 5 years ago #

    Yes, yes, yes. It works very well. The code changes were made very fast. It really is much nicer to be able to view all pictures.
    However, there is one downsite (imho). It would be even better if, when one stopped viewing, one would return to the page of the picture -LAST SEEN- (while viewing.
    The way it is now sometimes give me a feeling of I got lost somewhere. Where am I in the album? On which page?
    Ah well, you can't win them all. Maybe someday it will work this way.
    Thanks guys.

  20. sweigold
    Member
    Posted 5 years ago #

    That's not a bad idea. Unfortunately, the way that the thickbox and lightbox do navigation through the images there isn't an easy way to pass the "current" image back to the referring page and that's what would probably be needed to make such a change. It's a feature I wouldn't mind having either, so I'll take a look at it. I'll post the results if I come up with anything good.

    Steve

  21. EOracle
    Member
    Posted 5 years ago #

    That's a good idea. Would it be easier to modify the Thinkbox and Lightbox instead to show which page the reader is on?

    Like

    Image 30 of 100 (Page 3 of 10)

  22. sweigold
    Member
    Posted 5 years ago #

    Maybe, but the problem with that is that at thickbox and lightbox are both components that are not exclusive to Nextgen Gallery. There was already at least one case where Alex used a custom thickbox for Nextgen and it was conflicting with another plugin that was using the standard thickbox. As a result of that Nextgen moved to using the standard thickbox as well in one of the newer versions. Going back to custom versions of those components is not a good idea for that reason.

    I think Thickbox (don't know about lightbox) allows for some customization of the close function. That may be a better way to deal with it.

    Not to mention that showing the reader the page of the image in the thickbox still doesn't bring them back to the right gallery page and requires the user to notice it, remember it, and then select the right page when they get back to the gallery.

  23. shinsui
    Member
    Posted 5 years ago #

    It's a feature I wouldn't mind having either, so I'll take a look at it. I'll post the results if I come up with anything good.

    Hmm, that's nice to hear. As I am no progammer I can only wait and hope your interest in this will result in some code patches. You already did a job well-done ;-) Thanks again. And I do hope that when the changes make it into the main core, Alex will let us know about it.

  24. goodenvy
    Member
    Posted 5 years ago #

    Where exactly is the navigation code located? I want to completely delete the option of navigation once the thumbnail has been clicked ...

    I'm using my gallery with the tags feature.. so anything tagged with the words PC are going to show up yet I have done this for two different images/galleries.. and the second gallery has the tag IMAC yet when I click on just the PC thumbnail I get the pagination feature that points me to my IMAC tagged gallery..

    Is this another way to show all the images?

    ??

    example: http://home.yourconame.com/nggallery/page-44/album-1/gallery-1/images/

  25. goodenvy
    Member
    Posted 5 years ago #

    Hm. .. for now I'm using the Shutter and have changed the Shutter's CSS to zero pixels for the count and next values

  26. goodenvy
    Member
    Posted 5 years ago #

    Hm. .. for now I'm using the Shutter and have changed the Shutter's CSS to zero pixels for the count and next/prev values

  27. demonboy
    Member
    Posted 5 years ago #

    Thank god I've found this post - been searching for this solution for ages! Haven't implemented yet but it looks easy enough. Thank you to all involved.

  28. demonboy
    Member
    Posted 5 years ago #

    Just implemented it and it works first time. Spot on chaps.

  29. sweigold
    Member
    Posted 5 years ago #

    @ goodenvy - the actual navigation code is in the thickbox.js class which can be found in wp-includes/js/thickbox. Be careful making modifications here though. Many different plugins use thickbox and Nextgen Gallery had problems in older versions because it used a modified thickbox and conflicted with some other plugins. Personally, I think your method of hiding the navigation with CSS is a good choice.

    @ demonboy - thanks for mentioning it. I've spent a number of hours on the fix. Getting some thanks makes it worth the trouble of sharing the solution.

  30. schemarc
    Member
    Posted 5 years ago #

    @alexrabe

    Hallo Alex

    es wäre klasse wenn Du diese Funktion in dein nächstes Update integrieren könntest, ich denke Du würdest da vielen helfen :-)

    Vielen Dank auch für dieses Plugin ist wirklich genial.

    VG Marco

Topic Closed

This topic has been closed to new replies.

About this Topic