display custom field on mouseover of thumbnail?

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>

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!

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