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>

Answer 2

I had similar problem. But in my case only first word was displayed, as there was missing a double quotation marks in HTML markup, in this case, make sure that there is title= markup in your HTML and is quoted:

<a title="Your Title Quoted" href="path/to/your/big-image.jpg" rel="prettyPhoto">
    <img src="path/to/your/small-image.jpg" alt="caption text" />
</a>

Hope this will help too.

Answer 3

I was also experiencing this problem and found this article which really helped me:

Using HTML Formatting in PrettyPhoto Captions

I know this question has already been answered, but i believe this method allows for more freedom in terms of formatting.

Quote from article:

Open the jquery.prettyPhoto.js file from your site and locate the line that contains the following code:

pp_descriptions=isSet?jQuery.map(o,function(t,n){if(e(t).attr(settings.hook).indexOf(theRel)!=-1)return e(t).attr("title")?e(t).attr("title"):""}):e.makeArray(e(this).attr("title"));

And then replace it with the 'alt' attribute:

pp_descriptions=isSet?jQuery.map(o,function(t,n){if(e(t).attr(settings.hook).indexOf(theRel)!=-1)return e(t).attr("alt")?e(t).attr("alt"):""}):e.makeArray(e(this).attr("alt"));

This works great, you can use "h2" tags and "p" tags to format your caption. BUT this does not allow the page to be validated by the W3 Validator.

So instead of using the 'alt' attribute, i simply replaced it with the'aria-label' attribute and voila! It works as expected and allows the page to be validated.

Example Code:

<a href="path/to/your/big-image.jpg" rel="prettyPhoto" title="This is the native tooltip" aria-label="<h2> This is a caption.</h2> This caption has formatting and does not interfere with the native tooltips.">
    <img src="path/to/your/small-image.jpg" alt="alt-text" />
</a>

Answer 4

This is great however if I wish to include break tags
or accent titles with the tag this information doesn't seem to work or else it breaks the functionality. I can't believe pretty photo would make it this difficult for tooltips to be disabled.....

Who really wants their description to be highlighted with all that code? :P

Answer 5

Thank-you Kyle!!!!! That really drove me crazy and finally you showed me the way. :) I'd like to add if you don't want any tooltip to show up, just add a blank space to the img title, ie: title=" " otherwise it ignores it and goes back to the anchor title. Thanks again!

Answer 6

when you use tipsy.js, can neeed to only exchanage "title" attribute to "original-title" in jquery.prettyPhoto.js.

like this:

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

Answer 7

Building on what Mitchell said:

I used .html() instead of .text() because I used nested styled spans :

<span class="popup_text_cont">
      <span class="popup_caption_cont">
        <span class="popup_detail">
          <span class="popup_caption">Client</span>
          <span class="popup_basic_info">Playhouse Square Foundation</span>
        </span>
        <span class="popup_detail">
          <span class="popup_caption">Project</span>
          <span class="popup_basic_info">Broadway Buzz eNewsletter</span>
        </span>
        <span class="popup_detail">
          <span class="popup_caption">Skills</span>
          <span class="popup_basic_info">HTML, CSS</span>
        </span>
      </span>
      <span class="popup_description">
        Designed and implemented a templated eNewsletter that was distributed to theatergoers and Playhouse Square sponsors.
      </span>
    </span>

Replace (what was line 155 for me in the uncompressed version) with something like this.

if($(n).attr(settings.hook).indexOf(theRel) != -1) return ($(n).find('span.popup_text_cont').html()) ? $(n).find('span.popup_text_cont').html() : ""; }) : $.makeArray($(this).find('span.popup_text_cont').html());    

Answer 8

Just add this

font-size: 0px !important;