Open NextGEN gallery from link or single image

It’s really a simple question: How do you open a nextGEN gallery from a link or a single image? But apparently no one has a simple answer. Well here goes – pretty simple and definitely a TOTAL HACK JOB, but it worked for me (well, sort of…)

The key to the hack is actually having the gallery on the page, but hiding it from view with a DIV.

First, use the standard NGG shortcode to place a gallery on your page. Then wrap the shortcode in a DIV set to display:none as shown below.

<div style="display: none;">[nggallery id=1]</div>

If you want to link to a NGG gallery from a TEXT LINK, do something like this:

<p><a class="cboxElement" rel="lightbox[set_2]" title="" href="https://www.yourdomain.com/wp-content/gallery/gallery-name/first-image.jpg">Open Gallery</a></p>

Apparently the CLASS isn’t important but the REL is important.*

If you want to link to a NGG gallery from a SINGLE IMAGE, do something like this:

<p><a class="cboxElement" title="" href="https://www.yourdomain.com/wp-content/gallery/gallery-name/first-image.jpg" rel="lightbox[set_2]"><img src="https://www.yourdomain.com/wp-content/gallery/gallery-name/first-image.jpg" alt="" /></a></p>

Technically, you can use a different image from the gallery for the img src reference – which is the image that actually appears on the page.

Again, apparently the CLASS isn’t important but the REL is important.*

*To get the correct REL reference, I simply placed a gallery on my page, then viewed the page in FireFox. I right-clicked the first gallery image on the page and chose “Inspect Element” using FireBug. In the page code, I found the CLASS and REL references set by NGG on the image link, so I used those. Simple enough. (In my case, I was using the Lightbox-Plus plugin with NGG gallery set to Lightbox, which I guess created the “lightbox[set_2]” REL reference. Yours will probably be different.)

!!!IMPORTANT NOTE!!!

As I said, this hack sort of works.

For some reason, this hack adds the reference image as an additional image to the gallery and drops you onto that last (extra) image of the gallery view. So if your gallery has 5 images, when you launch the gallery using this hack you will get 6 images with the reference image appearing twice, and the first image you see will be the extra image: “Image 6 of 6”.

I tried “excluding” the reference image in the NGG gallery but that can create other problems and I can’t find any other workaround to this hack.

Basically, if you can live with an extra duplicated image in your gallery view, this simple hack might work out for you.

As always, this worked for my install, my theme, my browser, etc.

Your mileage may vary – but I do hope it helps you.