[Plugin: NextGEN Gallery] Text Link to Single Image Pop-up

I want to do exactly the same thing – can anyone help?

Thanks

Here’s the simplest way, but it’s only a direct link to the image and not a link to a page that uses your theme template to show the image:

Get to wp-content/plugins/nextgen-gallery/view/gallery.php via FTP or WP edit plugins. If you edit the gallery.php, it will change how all galleries are shown.

(Best is to grab the file via FTP and save gallery.php as gallery-gallery2.php, edit, put into the same directory. use [nggallery id=X template=gallery2] shortcode on your page. Search google for where to put ngg templates in your theme directory so they don’t get deleted when upgrading.)

This is what needs to be added:
<span> <a href="<?php echo $image->imageURL ?>"> Link </a> </span>

Here’s the Thumbnails section in full with the addition:

<!-- 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 } ?>
			</a>
			<span> <a href="<?php echo $image->imageURL ?>"> Link </a> </span>
		</div>
	</div>

Apologies – I just re-read, and realized that you want the link to open the image in a shutterbox/thickbox ‘pop-up’ effect. I’m not sure how to do that. For grins, I tried adding class=”shutter” to the anchor tag, but it didn’t seem to work.

So using class=shutter” does work, but I forgot to set my effect to Shutter in the NGG Options page (was thickbox) before I tested it.

So use this instead:

[Code moderated as per the Forum Rules. Please use the pastebin]

If you use the Thickbox effect, just use class=”thickbox” instead of class=”shutter”

Crud – missed a back-tick…

Thumbnails section in gallery.php or gallery-gallery2.php in full with the link including class addition:

<!-- 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 } ?>
			</a>
			<span> <a href="<?php echo $image->imageURL ?> " class="shutter"> Link </a> </span>
		</div>
	</div>

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

 	<?php endforeach; ?>

	<!-- Pagination -->
 	<?php echo $pagination ?>

</div>

<?php endif; ?>

Code:
To answer my own question, edit the post and use the HTML editor to enter the following:

<a class="shutterset_set_8 title="Image_Title" href="https://yourblogURL/wordpress/wp-content/gallery/gallery_name/image_id.jpg">Text_Link</a>

This will link to the image “image_id”, with a description “Image_Title” from gallery “gallery_name”

On clicking the link the image will float above the page as it does in a gallery

I tried the code listed above in bolide’s post and it didn’t work for me… Can anyone help me figure out why? I tried about a million variations of different things to find if I was making a mistake somewhere, I’m pretty sure that there are missing quotes after “shutterset_set_8” also – correct? I added those quotes, changed the image title and inserted the proper image link only to have the image just open in the same browser window (replacing the webpage).

Can anyone help please? I’m not sure if the “Image_Title” even matters here, but I matched it verbatim to what is in my gallery. I also am certain the link is proper since it opens the image, I even tried it with both the actual image title (.jpg extension) and using the NextGen image id number.

I don’t want to put a link to my site only because I am constantly making changes trying to fix this, so I can’t tell you what state it will be in. I’m not a professional programmer, but I know my way around HTML and CSS pretty well so I don’t feel like I’m overlooking anything basic.

Thanks in advance.

PS – just so we’re clear, this is the code I’m using:

<a class="shutterset_set_8" title="Wires under right side cover" href="/wp-content/image_gallery/tech/electrical/load_eq/done.jpg">this picture</a>

OK, I figured this out – thanks to bolide for guiding me to the solution. The problem I was having was that the class="shutterset_set_8" was not working for me. I changed that to class="Thickbox" (which is the effect I use for my images) and it now works.

Was I doing something wrong before, or has the code changed? What I’m left wondering is if the code “shutterset_set_8” was a higher tier variable (I’m not sure of the proper programming term) that would display the image regardless of what effect I used rather than having to specify “Thickbox”?

If anyone knows I’d appreciate that info, if not then I hope this helps someone else.

Hi, I’m trying to accomplish the same thing but cannot find a combination that will work for me. I tried the code from bolide above to no avail and began trying all variations; none of which will work. Can anyone help with this? Eventually the idea is to link the “film-strip” photo to the NextGen gallery. Currently the site is up on a temporary server. Any help would be greatly appreciated.

https://scoopsriverpark.com/posh/gallery/website-filmstrip-images/

Ah HA! I got the text link to work. What I’m trying to do is have the thumbnails in the “film-strip” open up the full size image in a “lightbox”. The plugin I’m using for that is called “Meteor-Slides”. Is this possible?

Text_Link

Ooohh, I had to edit the “meteor-slideshow.php” file to have it open a link in a lightbox. My solution was:
<a href="<?php echo get_post_meta( $post->ID, "slide_url_value", $single = true ); ?>" class="shutterset_website-filmstrip-images" title="<?php the_title(); ?>"><?php the_post_thumbnail( 'featured-slide' ); ?></a>

@bare and @inhouse

<a class="shutterset_set_8" title="Wires under right side cover" href="/wp-content/image_gallery/tech/electrical/load_eq/done.jpg">this picture</a> works for me as well, but the image description text does not show up when the image pops up.

Can anyone help?

@lpnotes

Sorry for the delay in replying, I was out of town.

This code works for me, I’m unsure what your specific problem is. Check out an example I have here:

https://tech.bareasschoppers.com/resources/the-problem-with-wire-tap-connectors/

At the very bottom of that article there is a link “do this instead” and it works. This is my code for it:

<a class="thickbox" href="/wp-content/image_gallery/misc/pigtail.jpg" title="Inline splice solder connection">do this instead</a>

When you click on it you get the pop-up image and the text description under it.

I dunno what your specific problem is, your code looks good to me, I hope you get it figured out.

Is there a way to make the images in the slideshow be clickable to open a related individual Website URL in a new tab or window? Here’s me working site: https://doorcountyresorts.com/

@bare Thank you so much! I just missed adding the “title” text inside the class. The only other thing I couldn’t figure out, though, was how to get a hyperlink inside the description.

title="description <a href="#"> description"

didn’t work for obvious reasons.

I’m also interested in knowing the answer to @designwise’s question.