SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Dec 2012
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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. #2
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    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

    I did a quick Google and ended up here: http://stackoverflow.com/questions/4...inks-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.

    Code javascript:
    //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.
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •