Fancybox Suppresses URL Containing "&"

Question

I have a script that resizes images for me and uses it to serve images as such:

http://mysite.com/createthumb.php?filename=mypic.jpg

Fancybox will serve the above image using the following link:

<a href='createthumb.php?filename=mypic.jpg' class='fancybox' rel='lightbox[pics]' title=':: [ ]'><span></span><img src='createthumb.php?filename=mypic.jpg' alt='Loading...' /></a>

But I need to resize, the size of which is different from the default size, passing the parameter "size" as such:

http://mysite.com/createthumb.php?filename=mypic.jpg&size=2000

But when I change the fancybox link to the following:

<a href='createthumb.php?filename=mypic.jpg&size=2000' class='fancybox' rel='lightbox[pics]' title=':: [ ]'><span></span><img src='createthumb.php?filename=mypic.jpg' alt='Loading...' /></a>

Now fancybox chokes and link just gets the image as an image without lightbox. This is true even if I change my code so that it does not even look at the size parameters. In other words, just adding "& size = 2000" to the end of my link seems to completely disable fancybox.

Any ideas on why this might be and how I can fix it?

Answer 1

It looks like fancybox is checking the end of the url to determine if it is an image or not. Change your url as createthumb.php?size=2000&filename=mypic.jpg

https://github.com/fancyapps/fancyBox/blob/master/source/jquery.fancybox.js (line 767)

Answer 2

The script cannot guess the type of content by looking at your link. You have 3 options:

1) Change the links by adding an image extension at the end so that the script can detect -

 <a href='createthumb.php?size=2000&filename=mypic.jpg' class='fancybox' .. 

2) Use the CSS class name to indicate the type of content -

 <a href='..' class='fancybox fancybox.image' .. 

3) Set the type during initialization -

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