link with & in their HREF do no work with Fancybox

[seblucas]

Same problem as here : http://code.google.com/p/fancybox/issues/detail?id=41

[ablo]

Any news on this?
I use timthumb together with Jquery 1.9.1 and Fancybox 2.1.4.

URL like this does not open the lightbox:
gallery/timthumb.php?src=FILEPATH&h=1200&zc=1&q=100

Is there any solution to this yet or do I simply have to use old versions?

Thanks

[JFKDIAZ]

@seblucas : you need to be more specific. The link you provided is outdated. Could you provide a current sample of what you are describing as a bug?

@ablo : fancybox try to guess the type of content based on the URL in the href but if fails, it quits silently. As a workaround you have to force the type of content (an image for instance) either :

• add the data-fancybox-type="image" attribute to your link
• add the type option to your custom script like

    $(".fancybox").fancybox({
       type : "image"
    });

• add the special class fancybox.image to your link like

<a class="fancybox fancybox.image" href'="{target}" ...

[seblucas]

@JFKDIAZ

You can try this link http://cops-demo.slucas.fr/testfancybox.xhtml

The href on the first link is working because it has no & in its URL. The second one is not working because of the "&" in its URL.

There is no problem if I use an HTML page only with Xhtml (changing the content-type to text/html fixes the problem but that's not what I want).

Hope that's clearer ;).

[JFKDIAZ]

@seblucas : My comment to @ablo regarding the type of content solves the issue.

My conclusions :

• Fancybox (v2.1.4 as today) works with links that have & in their HREF
• Potential issues seem to be associated with :
  • Incorrect DOCTYPE.
  • Incorrect document html structure.
  • Incorrect document encoding.

Recommendations :

• Validate your HTML document.
• Encode your documents using UTF-8 without BOM
• Force fancybox content type properly, e.g. in case of image use one of the following :
  • add in the link the special class fancybox.image
  • add in the link the attribute data-fancybox-type="image" (requires HTML5 DOCTYPE)
  • add in the custom script type : "image"

Demos :

• Working http://jsfiddle.net/L95Kf/ (using your code)
• Documented page : http://www.picssel.com/playground/jquery/ampIssue_03may13.html (using your code and headers)

Could you keep your demo page for future reference? It may help somebody else.
Also, I think this issue can be closed.

[seblucas]

@JFKDIAZ : Sorry I must be blind ;) but I really don't see how my issue is solved

My test page is 100% W3C valid, has a correct DOCTYPE and use UTF8.

I also used type: 'image'.

The only difference if found is :
You sample page header use content-type : text/html
Mine use (as you should do if you offer xhtml) : content-type : application/xhtml+xml

So I downloaded your sample page, renamed it to xhtml, change the link to fancybox and uploaded it to my server and it doesn't work, you can check for yourself :

http://cops-demo.slucas.fr/ampIssue_03may13.xhtml

I really think there is something fishy here and this issue should not be closed so soon.

[seblucas]

@JFKDIAZ

I'm not that blind just not clear enough : I was talking about the HTTP headers (checked with Firebug) not the meta.

Can you rename your page to xhtml on your server and check the HTTP headers to see if the content type become application/xhtml+xml and then if the behaviour change. I use Nginx as a webserver but I had the same problem with IIS and Apache.

I use Notepad++ and Filezilla and so far I think the encoding is really UTF-8 without BOM.

[seblucas]

@JFKDIAZ

The problem only appear when the HTTP header Content-Type is set to application/xhtml+xml. I use xhtml especially to be sure to always have perfectly valid DOM without missing tags, correct tags, ... . I've had way too many problems whith javascript coming from bad HTML code causing the DOM to be strange.

[JFKDIAZ]

@seblucas I ran some other tests with fancybox and xhtml (application/xhtml+xml MIME type) documents and not just the images (with & in their href) tend to fail. I guess the issue goes far beyond than using & in the href.

In your particular case, patching the & issue may not be difficult but you may find other issues using fancybox with other type of content (iframes for instance.)

Related to the &, I think is a two step process. It seems that when passing the ampersand code ( & ) to fancybox, it somewhere somehow is converted to a simple & in the href string (which I think is normal) but when fancybox try to renders it (second step), because the xhtml MIME type, the parser is expecting to see & in the string but only sees & instead so it fails (not well formed error.)

The patch :

In the fancybox js file (full format), in the line 1120 you will find these lines of code

case 'image':
  content = current.tpl.image.replace('{href}', href);
  break;

changing it to (forcing to replace the received string again)

case 'image':
  content = current.tpl.image.replace('{href}', href).replace('&','&');
  break;

fixes the issue of passing & in the href (for images only as in your example though.) But as I mentioned before, we would be patching only one hole in the dam.

Regarding

Will you release a new version with this fix ?

... is not my call, I am not fancybox developer.

I think the patch above may help to close this particular issue but other issues related to xhtml documents may be still there. I guess most web pages nowadays use a HTML5 DOCTYPE so personally I don't see how the plugin will be patched any time soon to handle xhtml documents fully.

[seblucas]

To sum up

This problem only appear with real Xhtml document (see Serving "real" XML ) so with an Content-Type set to application/xhtml+xml in the HTTP headers. It only depends on this header so the same problem could occur with many doctype.

I've forked the repository to enable JFKDIAZ's solution which was much cleaner than mine.See https://github.com/seblucas/fancyBox

I won't close this issue as I think it's a real issue but won't mind if it's closed.

[polymorphm]

same problem -- #592

( http://fancyapps-fancybox-escaping-bugfix.github.io/demo/demo-1/demo-1.html )

[fancyapps]

If you are using links like "gallery/timthumb.php?src=FILEPATH&h=1200&zc=1&q=100", then you must set content type, because fancyBox can not guess that you want to open this page as an image. The easiest way to fix would be to set attribute data-fancybox-type="image" (see @JFKDIAZ comment).