prettyPhoto, "title" and tooltips

Question

In prettyPhoto, how can I have the photo description come from something other than "title" (added to <a> tag surrounding the <img>)? When hovering over the image, it displays ugly html on my website that I only want to be seen and displayed by prettyPhoto when it opens (hence it contains html), but not as a tooltip.

One thought I had was to plug into an event but the only one relevant is changepicturecallback, and I can't figure out how to access the current photo element from that.

Maybe it's something in jQuery itself but I'm a little lost as to where to find it.

Any idea would help.

Thanks, Igor

Answer 1

Hopefully this isnt to late to answer your question, but i had to modify the pretty photo code recently to do just what you are asking.

there is a line that sets the description from the 'title' attribute of the anchor. You can change it to get the description from wherever you want. I decided to create a <p> tag under the anchor that stores the description.

To change where the description comes from, you have to modify pretty photos source. find the line that looks like this:

pp_descriptions = (isSet) ? jQuery.map(matchedObjects, function(n, i){ if($(n).attr('rel').indexOf(theRel) != -1) return ($(n).attr('title')) ? $(n).attr('title') : ""; }) : $.makeArray($(this).attr('title'));

it should be on line 152, atleast as of version 3.1.3. Just use a find and replace tool to search for "pp_descriptions."

change it to this:

pp_descriptions = (isSet) ? jQuery.map(matchedObjects, function(n, i){ if($(n).attr('rel').indexOf(theRel) != -1) return ($(n).find('p').text()) ? $(n).find('p').text() : ""; }) : $.makeArray($(this).find('p').text());

changing the "(this).attr('title')" to ".find('p').text()" will locate a <p> tag in the anchor instead of using the "title" attribute. You will probably want to hide the <p> tag with CSS so it doesnt display on your site.

now the html markup should look like this:

<a href="path/to/your/big-image.jpg" rel="prettyPhoto">
    <p>This is the Description</p>
    <img src="path/to/your/small-image.jpg" alt="caption text" />
</a>