Support » Plugin: NextGEN Custom Fields » display custom field on mouseover of thumbnail?

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author shauno


    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"]; ?>
    <?php endforeach; ?>
    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


    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!

    Plugin Author shauno


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

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘display custom field on mouseover of thumbnail?’ is closed to new replies.