Colorbox lazy load resize problem with large pictures

It's scaling correctly, for the most part, on the first view. But subsequent views (without refresh) the images are larger than the window again. There's also a bit of a flash of the larger size before it's initially scaled down.

Appears like the 'cbox_load' event is only triggering the initial time.

I show this to be working after flushing server and local caches.

EDIT: I take that back. It seems that the code calling the resize isn't being fired every time the cbox comes up. Taking a crack at resolving.

Here my 2 Cents for the resizing problem.

I am trying to achieve simple case where, opened colorbox uses picture element so the image size can be optimised for screen size. 

Configuration:

1. Drupal core 7.56
2. Chaos tools 7.x-1.12
3. Libraries 7.x-2.3
4. Breakpoints 7.x-1.4
   Added two breakpoints:
   - tablet (min-width: 768px)
   - mobile (min-width: 0px)
5. Picture 7.x-2.13+9-dev

   All default settings except I did configure ‘Picture polyfill to use’ to be ‘Development polyfill’ so I I could load non-minified version of picture.js 

   Added two mappings:
   - ‘Device mapping’ which uses ‘Device screen’ (see 4 above)
   - ‘Fixed size’ which uses ‘Fixed size’ (see 4 above)
6. Colorbox 7.x-2.13
   Library version: 1.6.4
7. The content type display for the image field is set as follows:
   - Format: Picture
   - Picture mapping: ‘Fixed size’ (see 5 above)
   - Colorbox picture mapping: ‘Device mapping’ (see 5 above)


I started digging in the issue and found few problems:

1. The settings configured in the Colorbox module are ignored.
2. Images larger than browser window size are not scaled to fit the window. They extend beyond.
3. Lack of resize colorbox to fit the window, on window resize or orientation change. This is more the feature request than bug but I think this is almost must be feature.

Attaching patch to address above problems: picture-lazyload-resizing-2412249-2.patch



Maybe there is nicer and/or cleaner way to resolve above.

We could create another issue or three issues to address all separately, but I have feeling it would only complicate the things and we would be waiting long time for resolution.

#7 Worked for me. Thanks Michael!

I added the following so images don't expand beyond their natural width if they are smaller than screen size.

var cbH,cbW;

if(nh < h && nw < w){
    cbH = nh;
    cbW = nw;
}
else{
    cbH = setSize($.colorbox.settings.maxHeight, h);
    cbW = h * r;
    if (cbW > w) {
        cbW = setSize($.colorbox.settings.maxWidth, w);
        cbH = cbW / r;
    }
}

@mmncs thanks you.
Did not test the case.
I did found I did not set correctly image size.
We need to get interface height and width.
Adding new picture-lazyload-resizing-2412249-3.patch

I will have a look at the new patch and test it.

I can tell you that patch #7 cut's of the bottom of the image of and doesn't work the first time fired in Firefox.

The 2412249-correct-resize.patch #6 worked for me by correctly resizing the colorbox. I chose this one because I was not seeing the images in carousels when clicking on them for the colorbox. This one also resized the colorbox to the window and didn't restrict the colorbox size.

After 8 years, is anyone still using these patches, or need this ticket to be completed?

@lesleyfernandes yes, I am using #10, that worked for me.

After 9y do I think we can unassign.