WordPress + Nextgen Gallery: Load Lightbox Gallery From One Image

This is an explanation of how to have multiple galleries on a page, yet only show one thumbnail, and that thumbnail shows all of the images in the gallery…in the lightbox view. Phew, it’s hard enough just to write out. But after trawling through the internet looking for the answer, I’ve jimmy-rigged it myself. I don’t know that I’d call it a hack…but at least your page load time isn’t affected. So here goes!

##UPDATE: I’ve just recorded a screencast for this tutorial:

1. Install the NextGen Gallery plugin (I assume if you’re having the same problem I did!)
2. Create a new page, and call galleries into it like this:
[nggallery id=1 template=one]
[nggallery id=2 template=one]
[nggallery id=3 template=one]

3. Create a new subfolder in your theme folder called “nggallery”.
4. Create a blank php file in the subfolder called “gallery-one.php” (this is the template you called in step 2.
5. Read my explanations and then copy the code and see how it works for you.

(This first bit is copied from gallery.php in the NextGen plugin folder)

<?php if (!defined ('ABSPATH')) die ('No direct access allowed'); ?>
<?php if (!empty ($gallery)) : ?>

Next we have to set our iterator (to find out where we are in the loop…not The Loop though).

<?php $i=1; ?>

Then let’s put our holder (with the ID of the gallery appended in the class) that will wrap each gallery.

<div class="holder<?php echo $gallery->ID; ?>">

And then our foreach statement. Here you can see I’ve added an IF statement that says, “if this is the first image, then show me the thumbnail linked to the lightbox slideshow…otherwise just give me a link (no image, but you need the a tag), and set its display to none”. After that is done, but before the FOREACH statement is finished, make sure and increment our iterator with $i++;

<?php foreach ($images as $image) : ?>
	<?php if ($i < 2) : ?>
		< a href="<?php echo $image->imageURL ?>" <?php echo $image->thumbcode ?> title="<?php echo $gallery->title ?>">
			<img src="<?php echo $image->thumbnailURL ?>" /></ a>


	<?php else : ?>
		< a style="display:none" href="<?php echo $image->imageURL ?>" <?php echo $image->thumbcode ?>>link</ a>
<?php endif; $i++; ?>
<?php endforeach; ?>

Finally, close out your wrapping div, and close out the IF statement from the top:

</div>
<?php endif; ?>

Here’s the full code

<?php 
/**
Template Page for the gallery overview

Follow variables are useable :

	$gallery     : Contain all about the gallery
	$images      : Contain all images, path, title
	$pagination  : Contain the pagination content

 You can check the content when you insert the tag <?php var_dump($variable) ?>
 If you would like to show the timestamp of the image ,you can use <?php echo $exif['created_timestamp'] ?>
**/
?>
<?php if (!defined ('ABSPATH')) die ('No direct access allowed'); ?>
<?php if (!empty ($gallery)) : ?>

<?php $i=1; ?>

<div class="gallery-holder gal<?php echo $gallery->ID; ?>">
<?php foreach ($images as $image) : ?>

	<?php if ($i < 2) : ?>
		<div style="display:none;">
			<img src="<?php echo $image->imageURL ?>" />
		</div>
		<a href="<?php echo $image->imageURL ?>" <?php echo $image->thumbcode ?> title="<?php echo $gallery->title ?>">
			<img src="<?php echo $image->thumbnailURL ?>" /></a>
	<?php else : ?>
		<a style="display:none" href="<?php echo $image->imageURL ?>" <?php echo $image->thumbcode ?>>link</a>
<?php endif; $i++; ?>

<?php endforeach; ?>
</div>

<?php endif;?>