JQuery SmoothZoom and PrettyPhoto - images not always loading in Firefox

Question

I'm using a JQuery plugin SmoothZoom from http://codecanyon.net/item/smooth-zoom-pan-jquery-image-viewer/511142?ref=janecross together with PrettyPhoto http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/ to have zooming in the PrettyPhoto lightbox.

Now this works OK in Firefox for one or two images, but then the images don't load and I get a PrettyBox error:

'Image cannot be loaded. Make sure the path is correct and image exist'

The content is being loaded via Ajax.

The strange thing is that it works then stops working in Firefox, but it works without fail in Safari. The images being loaded into PrettyBox are between 13 and 17 Mb. But it doesn't seem to make any difference if I reduce these in size significantly.

You can have a look at this at http://130.95.21.121/museum/search.php using Firefox.

Then -

Click the System checkbox and select:

'Genitourinary tract and fetal structures' then select Kidney from the dependant menu.

On the left hand div, click 'T71.M35203', then the image on the right. Do the same for:

T71.M83132 and T71.M410210

Repeat using Safari...

The relevant code in search.php:

function setZoom (){
            $('#fullResImage').smoothZoom('destroy').smoothZoom();
        }

        function closeZoom (){
            $('#fullResImage').smoothZoom('destroy');
        }

        //Set your popup window size here (in pixels):
        var canvasWidth = 640;
        var canvasHeight = 480;

        $(".zoom_gallery a[rel^='prettyPhoto']").prettyPhoto({
            default_width: canvasWidth,
            default_height: canvasHeight,   
            autoplay_slideshow: false, /* true/false */
            opacity: 0.70, /* opacity of background black */
            theme: 'pp_default', /* light_rounded / dark_rounded / light_square / dark_square / facebook */
            modal: true, /* If set to true, only the close button will close the window */  
            overlay_gallery: false,
            changepicturecallback: setZoom,
            callback: closeZoom,
            social_tools: false,
            image_markup: '<div style="width:'+canvasWidth+'px; height:'+canvasHeight+'px;"><img id="fullResImage" src="{path}" /></div>',
            fixed_size: true,
            responsive: false,
            responsive_maintain_ratio: true,
            max_WIDTH: '',
            max_HEIGHT: ''
        });

And the image links are being loaded from another php script which sends back via JSON/Ajax:

<ul class='zoom_gallery'><li><a href='specimen_media/" . $specimen . "/" . $row['image_large'] . "' rel='prettyPhoto' title=''><img src='specimen_media/" . $specimen . "/" . $row['image_small'] . "'></a></li></ul>

Answer 1

Seems that there a size limitation in PrettyPhoto...a 5Mb image seems to work OK.