Load entire NextGEN gallery from single thumbnail?

Question

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.

Answer 1

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/

Answer 2

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:

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

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

Answer 3

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.

Answer 4

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; }