WordPress.org

Ready to get started?Download WordPress

Forums

NextGEN Gallery
Text Link to Single Image Pop-up (17 posts)

  1. melvins138
    Member
    Posted 3 years ago #

    I need to put a text link to a single image in a gallery. I would like it to bring up the image in the standard NextGen "pop-up" when someone clicks on the title of the image.

    Is this possible?

    Thanks,
    Melvins138

  2. bolide
    Member
    Posted 3 years ago #

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

    Thanks

  3. nafink
    Member
    Posted 3 years ago #

    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>
  4. nafink
    Member
    Posted 3 years ago #

    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.

  5. nafink
    Member
    Posted 3 years ago #

    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"

  6. nafink
    Member
    Posted 3 years ago #

    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; ?>
  7. bolide
    Member
    Posted 3 years ago #

    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="http://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

  8. Bare
    Member
    Posted 3 years ago #

    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>

  9. Bare
    Member
    Posted 3 years ago #

    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.

  10. inhouse
    Member
    Posted 3 years ago #

    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.


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

  11. inhouse
    Member
    Posted 3 years ago #

    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

  12. inhouse
    Member
    Posted 3 years ago #

    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>

  13. lpnotes
    Member
    Posted 3 years ago #

    @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?

  14. Bare
    Member
    Posted 3 years ago #

    @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:

    http://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.

  15. designwise
    Member
    Posted 3 years ago #

    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: http://doorcountyresorts.com/

  16. lpnotes
    Member
    Posted 2 years ago #

    @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.

  17. Bare
    Member
    Posted 2 years ago #

    @lpnotes
    Glad I could help in some way. As for the linking, I don't know if that is possible because of the nature of the beast. I could be wrong, but I would search for that as a separate topic from this one and see what turns up. As for designwise's question, I know for sure that has been asked before, so it may also be just a matter of finding an existing thread. Unfortunately I can't answer either question, it's never been a necessity for me, so I never scoured the net too much for an answer. As I said though, I do remember reading about the image-to-page linking in the past, I just don't remember the answer.

    Good luck!

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.