Splashify Lightbox window size is not working

I am looking into this also.

I see that for non-Splashify colorbox images, the colorbox resizes correctly for the image, while Splashify's box appears with an incorrect height (in our case, ~170px). I wonder if there's a colorbox setting that would fix this in these cases (e.g. from http://www.jacklmoore.com/colorbox/).

Setting innerWidth/innerHeight or resizing in an onComplete function seemed hopeful (using an overridden splashify_init.js), but these haven't had an effect.

I'll post again if I can find out more.

Edit: There's a similar issue (limited to images, first-load, in Firefox) here which suggests some solutions for incorrect height/width: https://www.drupal.org/node/1361920 I have tried a few, but with no luck so far.

In the jQuery colorbox initialization settings, I changed the style from iframe to photo, and loaded an image via URL directly. In this case, Splashify loaded the image at the correct size.

I suspect this is something to do with colorbox iframe handling, or with CSS. It may not be related to Splashify at all, so we can move this issue elsewhere if appropriate.

Following up with a solution I discovered.
In my case, I switched from iFrame to html content, and still saw the small window.

This applied only to initial loading in Firefox [v. 31]. Chrome, etc. loaded the colorbox at the correct size.
It appeared that Firefox was not waiting long enough for the resize, and box measurements were incomplete.

I added this setting to an overriden splashify_init.js:
onComplete: function() { setTimeout(function(){$(this).colorbox.resize({width:"650px", height:"430px"});}, 300) },

Width and height above were the actual size of the HTML content to be displayed, plus a bit for colorbox edges/close button.

This function delayed the resize in Firefox long enough that it took effect. Since this also meant that Firefox showed a small window and then resized it, appearance was better when I hid the colorbox before loading it:
$('#colorbox').css('display','none');
...and added $('#colorbox').css('display','block'); just before setTimeout() in the onComplete function above.

I have seen similar problems described elsewhere, so I don't think this issue relates to Splashify directly.

Another, clearer solution, without hackiness:

Firefox was seeking out the largest image in content, and resizing to that size.
After images in HTML content were replaced with background images (which suited our use case anyway), Firefox resized the box to fit the entire HTML content.

Probably nothing to do with Splashify at all.

Strange, because the colorbox sizing seems to work from my end:
http://cl.ly/image/2j3M3R1i2c1P

What version of colorbox are you using?

Hi Chris,
I'm currently using version 7.x-1.3.

I am going to update jstorage and colorbox to see if I can replicate this issue.

D7 reached its EOL back in January 2025, and there is no active release for D7 for this module anymore.
Development or support is not planned for D7. All D7-related issues are marked as outdated in a bunch.