I'm using Alex Rabe's NextGEN Gallery in a lot of client sites as a centralized image repository, and am finding I often need to load an entire gallery into a lightbox (invoked via a single thumbnail), without displaying more than a single thumbnail on page.

Thus, I could have a series of four thumbnails on a page, each thumbnail opening a different set of pictures in a lightbox when clicked.

Any idea how I could do this? Thanks.

4 Answers 4


Output all images of each gallery in your HTML. Use an anchor tag that links to the fullsize image around each thumbnail. Depending on the lightbox plugin you prefer to use, group all images from the same gallery (often done using the rel attribute in HTML). At that point, just hide all but one thumbnail per gallery. Hook your lightbox plugin to the galleries.

Check it out: http://jsfiddle.net/8WcUp/1/

  • Just a note, though -- the jQuery code to select :first-child in earlier browsers doesn't work in IE7. Looking for workaround...
    – aendra
    Commented May 18, 2011 at 0:21
  • Nevermind -- I had a comment denoting the start of the thumbnails, which, according to IE7, is itself the "first-child". Ugh, IE7 is stupid. Apologies, your code is fine.
    – aendra
    Commented May 18, 2011 at 0:29

The images are already grouped by gallery, so you simply need to determine the gallery to which the single pic belongs (which I think is $image->galleryid), and then drop rel="lightbox[$gallery]" into the anchor tag in your singlepic.php template file.

So, something like this (in the singlepic.php NextGen Gallery template file:

$galleryid = $image->galleryid;
<a href="<?php echo $image->imageURL ?>" title="<?php echo $image->description ?>" <?php echo $image->thumbcode ?> rel="lightbox[<?php echo $galleryid; ?>]" >

If that doesn't work, let me know and we'll figure it out!

  • That's great; I'll try that in a few hours and let you know if I have any problems. Thanks!
    – aendra
    Commented May 17, 2011 at 0:30
  • Just tried it out -- this currently just takes me to the full image and does not work...
    – aendra
    Commented May 17, 2011 at 9:05
  • Okay, let me do some testing and figure it out. :) Commented May 17, 2011 at 11:40

As of 2015 and NextGen 2.0. Don't hack this, use shortcodes to display a single image and then lead to the lightbox:

[ngg_images gallery_ids=7 display_type=photocrati-nextgen_basic_thumbnails disable_pagination=1 images_per_page=1 show_all_in_lightbox=1 show_slideshow_link=0]

Further documentation and useful examples.

  • Good modern answer!
    – aendra
    Commented Nov 2, 2015 at 14:45

Simply add this style to your nggallery.css file to display only the first image in the gallery. When you click the thumbnail, the lightbox effect will display all of the images. No PHP code needed:

/* For NextGen Gallery. Displays thumbnails on a page, and when you click each thumbnail opens it's own gallery. Normally when you insert a gallery, it displays all the thumbnails in the gallery. This hack will hide all the thumbnails except the first one. Make sure you don't display [show slideshow], because that will be the first child. */

div.ngg-gallery-thumbnail-box { display:none; }
div.ngg-galleryoverview div:first-child { display:block; }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.