WordPress.org

Ready to get started?Download WordPress

Forums

NextGEN Custom Fields
[resolved] display custom field on mouseover of thumbnail? (4 posts)

  1. bhomatude
    Member
    Posted 1 year ago #

    I am trying to work out how to display a custom field when hovering over a thumbnail. The catch is that I'd like this field to be displayed in a completely different area on the page (not like a caption)... So I guess inside its own div that is positioned absolute outside of each thumbnail div. Any hints on how I should go about doing this?

    http://wordpress.org/extend/plugins/nextgen-gallery-custom-fields/

  2. shauno
    Member
    Plugin Author

    Posted 1 year ago #

    Hi bhomatude

    You might be able to do something like this with pure CSS, but I unfortunately do not know it well enough for that. But you definitely can do this with javascript, and that I do know :)

    Essentially, all the code below does is output all the "Test Field" values for each image, inside their own hidden containers. Then, when someone mouses over an image, the script un-hides the relevant custom field container. Additionally, it will hide the custom field container on mouse out.

    You can put this piece of code anywhere outside of the main image loop inside the gallery display template (I put it at the very top while testing).

    <?php foreach ( $images as $image ) : ?>
    	<div id="nggv-custom-field-<?php echo $image->pid ?>" class="hidden-custom-field" style="display:none;">
    		<?php echo $image->ngg_custom_fields["Test Field"]; ?>
    	</div>
    <?php endforeach; ?>
    <script>
    jQuery(document).ready(function() {
    		jQuery('.ngg-gallery-thumbnail-box').mouseover(function() {
    				var pid = jQuery(this).attr('id').substr(10); //get the image db id from the dom element id
    				jQuery('#nggv-custom-field-'+pid).show(); //show the custom field container
    		});
    
    		jQuery('.ngg-gallery-thumbnail-box').mouseleave(function() {
    				jQuery('.hidden-custom-field').hide(); //hide all custom field containers
    		});
    });
    </script>
  3. bhomatude
    Member
    Posted 1 year ago #

    Shauno!

    Wow. That worked PERFECTLY! I styled the div to appear right where I wanted it and it works like a charm. Very cool. It's a test for a potential job and if I get it, I'd like to throw you a few bucks for your very quick support.

    Thank you!

  4. shauno
    Member
    Plugin Author

    Posted 1 year ago #

    A couple buck in support is always appreciated. Good luck with the job prospect.
    Let me know if you need anything else :)

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic