Wordpress Gallery using alt tags as pic captions instead of title tags

JavaScript
1

Okay,here’s my challenge. I set up a Next Gen image gallery in Wordpress. When you click on an image it enlarges and has a caption underneath it, which is taken from its title tag. My client doesn’t like how when you roll over an image in the gallery a tooltip shows up with the image’s descritpion, which is also from the title tag. But he still wants the image description to show up as the caption when you click on the image and enlarge it.

Here is a link to a page in the site, if you roll over the first image in the gallery, you’ll see what I’m talking about and hopefully it’ll make sense. http://mbigelowphotographer.com/wp/engagements

I’ve tried to find ways on hiding browser default tooltips but I’ve had no luck. So I thought of placing the image’s description in the images alt tag instead of the title tag. Which is fine, I took care of that in the gallery.php file.

But now I can’t figure out where in the java script file,shutter-reloaded.js, for the image caption to pull the alt tag instead of the title tag. I’ve played around in this file for awhile and I believe that’s what controls/triggers it. I can

I’m hoping its a simple solution that I’m just overlooking since I am only not familiar with javascript.

Or maybe I’m way off and it’s not in that js file. Any help would be appreciated. Thanks in advance.

2

Hi there AndrewChambers,

I’ve got a solution that allows you to keep your title attributes intact and will get rid of the native hover effect and will use the title for the captions :slight_smile:

I did a quick Google and ended up here: http://stackoverflow.com/questions/457366/disabling-browser-tooltips-on-links-and-abbrs - though this solution seemed to work, whenever you’d close out of the shutterbox the native title tooltips would show again, so I rewrote the concept using jQuery and a delegated event.


//first we get all the links in the gallery and add a data attribute with the title to all links
jQuery(".ngg-galleryoverview a").each(function(){
	var $link = jQuery(this);
	$link.data("title", $link.attr("title"));
});


// let's monitor the mouseover/out events on all the links in the gallery
jQuery(".ngg-galleryoverview").on("mouseover mouseout", "a", function(e) {
	var $link = jQuery(this);
	
	if (e.type === "mouseover") { //on mouseover empty the title
		$link.attr("title", "");
	}
	else { //on mouseout we reinstate the title
		$link.attr("title", $link.data("title")); 
	}
	
});

If you add this in a script that’s loaded at the bottom of the page or somewhere inside a jQuery(document).ready(function(){}); statement it should do the trick.