CODEWITHSUNDEEP
jqueryimagefancyboxpreloadfancybox-2
Dan Twining
Dan Twining

Reputation: 650

Fancybox Custom URL Image Preloading

I'm putting together a gallery page with the images being displayed in a fancyBox. The actual images are large files so I'm running a php script to re-size the original image file on the server side and output a smaller, lighter version of it for the fancyBox.A result of doing this means the URL for the image has a like "/images/photo.php?image=001.jpg".

Doing this means fancyBox has to be forced into image mode as normally it'd expect a .jpg file but it's getting a .php script instead. This works well but does cause a problem where fancyBox no longer pre-loads the next and previous images. My initial plan of smaller / lighter / faster loading images being used falls apart at this point because the PHP script which re-sizes the image takes some time and causes an annoying lag between clicking next and the new image actually being displayed. Being able to pre-load the next / previous one would help things a lot.

Has anyone got any idea if it's possible to force fancyBox into pre-loading the next image regardless of the file type it's pointing to?

As a side note, not running a server side script to re-size the images causes fancyBox and some browsers to just give up loading the images and use up huge amounts of memory very quickly...each image is around 2MB before re-sized.

Any advice appreciated.

Upvotes: 0

Views: 1039

Answers (2)

Magnus
Magnus

Reputation: 25754

This issue is browser specific I believe. I was working on the exact same thing (php dynamic resizer through a lightbox with preloading) and finding that although the dynamic images were preloaded as expected, Chrome insisted on loading them again when they were displayed. The preloading worked fine on Firefox. I'm guessing this has something to do with Chrome detecting that the content was dynamic, but I didn't debug this any further.

Since I had the same issue with memory on dynamically resizing a lot of pictures, I switched to resizing the pictures to disk and using a function in my main php file to provide a link directly to the resized images on disk. That meant that Chrome started to handle the preloading correctly.

Upvotes: 0

ktutnik
ktutnik

Reputation: 7262

try this:

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

Fancybox by default guess the content of the url. specify the content using its type

Upvotes: 1

Related Questions