Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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.

share|improve this question
add comment

3 Answers

up vote 3 down vote accepted
+50

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/

share|improve this answer
    
This totally did the trick. Thanks! –  aendrew May 17 '11 at 9:53
    
Just a note, though -- the jQuery code to select :first-child in earlier browsers doesn't work in IE7. Looking for workaround... –  aendrew May 18 '11 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. –  aendrew May 18 '11 at 0:29
add comment

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; }
share|improve this answer
add comment

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!

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

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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