Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

Linking NextGEN Album thumbnail to lightbox WordPress


Hi there,

I really do hope one of you might be able to help me out with this as I've been scratching my head for a while with it!

Basically, take a look at [[LINK href=""]]this page[[/LINK]] - you'll see I'm using the extended album view for displaying different galleries. When you click on the thumbnail or title for each gallery you are taken to another page with thumbnails.

However, what I'd really like to do is make it so that when you click on the thumbnail or title you are straight away shown the lightbox/thickbox/highslide of the images in that gallery without being taken to a new page.

Is this possible?

I'm assuming it would be possible by changing the two links below for the title and thumbnail but I'm not sure what these would need to be changed to?

<div class="ngg-albumtitle"><a href="<?php echo $gallery->pagelink ?>"><?php echo $gallery->title ?></a></div>
<div class="ngg-albumcontent">
<div class="ngg-thumbnail">
<a href="<?php echo $gallery->pagelink ?>"><img class="Thumb" alt="<?php echo $gallery->title ?>" src="<?php echo $gallery->previewurl ?>"/></a>

Any help would be massively appreciated.

Answers (4)


Denzel Chia answers:


<blockquote>However, what I'd really like to do is make it so that when you click on the thumbnail or title you are straight away shown the lightbox/thickbox/highslide of the images in that gallery without being taken to a new page.</blockquote>

<em><strong>This is not possible.</strong></em> lightbox/thickbox/highslide are javascripts, they cannot do anything to images not shown in browser, unless they have an AJAX script within them, but even if they do, they still need a next image url in the browser, and a server side script to process the image request.

So this is why clicking on the gallery image will be taken to a new page, whereby all the images within the gallery are loaded. This will enable lightbox/thickbox/highslide to pick them up and arrange in a gallery.


FPHT comments:

Thanks Denzel.
I've decided to use the single gallery display to do this as it will work better, but wonder if you might be able to help out in making it look like the way the album display did?

See [[LINK href=""]]here[[/LINK]]

The first is the original album display - linking to the full set of images. The second is a gallery display that only shows the first image thumbnail and lightbox when clicked.

I've been editing gallery.php to make it look the same as the album display - so have managed to get the border and gallery title and description to show. Only problem is I can't work out how to get the description to sit beside the image rather than on top of it.

Are you able to help?

See gallery.php below.

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

<div class="ngg-galleryoverview" id="<?php echo $gallery->anchor ?>">
<?php if ($gallery->show_slideshow) { ?>

<div class="ngg-album">
<?php } ?>
<div class="ngg-albumtitle"><?php echo $gallery->title ?></a></div> !! THE GALLERY TITLE
<p><?php echo $gallery->description ?></p> !! THIS IS THE DESCRIPTION

<?php if ($gallery->show_piclens) { ?>
<!-- Piclense link -->
<div class="piclenselink">
<a class="piclenselink" href="<?php echo $gallery->piclens_link ?>">
<?php _e('[View with PicLens]','nggallery'); ?>

<?php } ?>

<!-- Thumbnails -->
<?php foreach ( $images as $image ) : ?>

<div id="ngg-image-<?php echo $image->pid ?>" class="ngg-gallery-thumbnail-box" <?php echo $image->style ?> >
<div class="ngg-gallery-thumbnail" >
<a href="<?php echo $image->imageURL ?>" title="<?php echo $image->description ?>" <?php echo $image->thumbcode ?> >
<?php if ( !$image->hidden ) { ?>
<img title="<?php echo $image->alttext ?>" alt="<?php echo $image->alttext ?>" src="<?php echo $image->thumbnailURL ?>" <?php echo $image->size ?> />
<?php } ?>

<?php if ( $image->hidden ) continue; ?>
<?php if ( $gallery->columns > 0 && ++$i % $gallery->columns == 0 ) { ?>
<br style="clear: both" />
<?php } ?>

<?php endforeach; ?>


<?php endif; ?></blockquote>


S├ębastien | French WordpressDesigner answers:

i don't understand. In my computer, the image is opened in a lightbox.
what do you want exactly ?

edit : sorry, i have understand the problem

FPHT comments:

Yes, the gallery page has thumbnails that open in a lightbox but I want the 1 thumbnail you see on the linked page above to open in a lightbox and then be able to scroll through the images in that specific gallery.

S├ębastien | French WordpressDesigner comments:

the most simple solution is to use a gallery and not an album.
If you use a gallery you can display the Preview image and when you click on it, a lightbox diplays the gallery

FPHT comments:

Yes, I have already thought about that. Problem is that I like the layout of the albums and the inclusion of the description etc. so would rather keep it like that and see if it's possible to change the link....


Joe Jenkins answers:

I use this plugin:

It also works with various other items, such as video.

FPHT comments:

I'm not looking for another plugin. I'm looking to edit this plugin so that the thumbnail links to the gallery of images in lightbox.


Chris Lee answers:

Yes it's possible. Could i just email you and get this fixed?

FPHT comments:

Great.... yes, please do, [email protected]

FPHT comments:

Have you emailed yet? I'm yet to receive anything. Thanks :-)