0

I have a script that re-sizes images for me and use 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 re-size it do a size that is different from the default size, by passing a 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 the link just gets served as an image without any lightbox. This is the case even if I change my code so that it doesn't even look at the size parameters. In other words, just adding the "&size=2000" to the end of my link seems to set fancybox completely off balance.

Any ideas about why this could be or how I can fix this?

Magnus
  • 23,900
  • 1
  • 30
  • 28

2 Answers2

3

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

1) Change links by appending image extension at the end, so the script can detect -

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

2) Use CSS class name to specify content type - 

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

3) Set type while initializing -

$(".fancybox").fancybox({type : 'image'});
Janis
  • 8,593
  • 1
  • 21
  • 27
0

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

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

Mitch Dempsey
  • 38,725
  • 6
  • 68
  • 74
  • Awesome, that was it. Thought I had commented out that line, replacing it with return true, but I probably did something wrong when doing that. Changing the order of the parameters did the trick, and without requiring any changes to the fancybox code, which is much better. Will accept the answer when SO lets me do so (time limit). – Magnus Nov 05 '12 at 23:25
  • ... you have two alternative options : add the attribute `data-fancybox-type="image"` to your link .... or add the API option `type: "image"` to your script so you don't have to rename the file name. You can find that at http://fancyapps.com/fancybox/#support FAQ tab, No.5 – JFK Nov 06 '12 at 08:30
  • voila, Janis just pointed it out at the same time I was writing my comment ;) – JFK Nov 06 '12 at 08:31