Debugging Fancybox on Tumblr

Question

I've managed to set up the Fancybox plugin on one of my Tumblr blogs, but when I transposed the exact same code to another Tumblr blog, I get a weird bug.

Here's the code where I'm calling the Fancybox function:

<div class="normal-width">
    <a href="{PhotoURL-HighRes}" class="fancybox" rel="gallery" title="{Caption}"><img src="{PhotoURL-500}"alt="{PhotoAlt}"></a>
</div>

While it should work fine and display the captions of the picture under the picture while displaying in Lightbox mode, the title attribute seems to be getting out of the Caption text just after the

<p>

tag that initiates the caption text.

This messes up the whole design, as it integrates the caption above each photo. And doesn't display it in the lightbox...

It works just fine on http://commutersatplay.tumblr.com/ but not on http://portraitsdemontreal.com/

Any ideas?? Thanks a for helping me out!!

Answer 1

Cause

The caption may contain HTML which is causing the attribute to close sooner than it needs to and cause the page to render in an undesired.

Solution

We need the caption, but with any HTML tags stripped out and appropriate characters converted to HTML attributes.

There are two options:

1. Use the theme operator {PhotoAlt}. This is a HTML-safe version of the caption.

2. Use the theme variable transformation Plaintext. {Caption} would be come {PlaintextCaption}. This is identical to the first option, but handy to show in case we need to use a different theme operator.

But, but... the OP already answered?

The current solution may fail under certain circumstances. If the caption was to contain any single quotes, 'hello', then the issue would present itself again.

References

• {PhotoAlt} http://www.tumblr.com/docs/en/custom_themes#photo-posts
• Plaintext http://www.tumblr.com/docs/en/custom_themes#variable-transformations

Answer 2

Just replaced

title="{Caption}"

with

title='{Caption}'

Does the trick :)