Colorbox (inline) integration broken

Hi,
I have the same issue, my colorbox window opens but becomes very small and does not contain any images...

Did you find a solution?

Hi, sorry for my bad english...

I have this problem too, but I don't use flexslider.

This problem (empty colorbox) appear when I select colorbox of type "inline"

Inside the function load() of original jquery library "jquery.colorbox.js", when jquery try to get the "id" object passed by picture, it get only the "wrapper id" without the children... so colorbox doesn't show any image.

jquery.colorbox.js get wrapper and children (picture element) if I force selector to a class.

I don't know why this happens, but I need this functionality and (for now) I have applied these patches @ picture and colorbox (library)

closed #2370261: Colorbox support broken as duplicate of this bug

Attached patch fixes this issue.

How is this activated to test? Unclear how to get inline images to do this.

@alanpuccinelli The general lazyloading functionality of the colorbox integration was broken. To test this you can

1. Create an image field with a picture formatter.
2. In display settings configure the picture to be linked to colorbox
3. View the page
4. Click the picture
5. Colorbox will load, but show no images

After applying the patch, the colorbox will show images.

I'm aware of how to do it with an image field. What I'm looking to do is create a colorbox automatically for all images used in the body of a node. Ideally the same way the image resize filter does where the largest breakpoint image is lazy loaded as a link automatically for all images that get processed by the picture input filter.

I don't think your use case is relevant to this issue. Perhaps you should open a new support issue, but to be honest I don't think picture module has the feature you are describing.

The patch in #5 seems to work in Chrome but not very well in Firefox (37.0.1)

Can you provide more information about what is actually going wrong?

In FF Colorbox doesn´t show images on the first click on the image. I have to close the empty colorbox first and reopen it again by clicking on the same image again - that time it´s OK.
If I have multiple images in the same field I have to repeat this process for every image.

In Chrome and Safari (I´m on Windows 7) everything works fine.

I've tested the patch in firefox 37.0.2 on OSX Yosemite and the images show up just fine without any errors in the console. Do you see any errors in the console?

No - I don´t see any errors in the console.

Which version of Firefox are you using?

37.0.2 on Windows 7

I think I've reproduced your issue. On VM with a clean windows 7 installation with a clean install of firefox 37.0.2 I notice a pretty long delay between the opening of the colorbox and the actual image being loaded. However I don't have to close and reopen the colorbox, it just takes quite long to load the image.

This delay is also (but far shorter) noticable in firefox on my macbook pro. I'll look into it when i have more time to spare.

@legolasbo
Today I started a fresh install of picture 2.x dev (of 2015-03-25) with patch #5 again.
This time everything works fine in Chrome AND FF.
But now in IE 11, every time I click on any picture to open the colorbox the browser crashes.
I will try IE 11 on another Computer and will come back with feedback.

Thanks

I tested on 2 different PC´s. One on Windows 7, the other one Windows 8.1. On both PC´s the same behaviour:
In IE when I click on any any image for the first time (even after refreshing the browser) the colobox shows a very small window. The image has been loaded but the size of the colorbox stays about 20 x 20 Pixel small.
When I close the colorbox and click the same image again (or an image I had clicked on before - without having refreshed) the colorbox opens as expected.

As this patch working, since we no longer use colorbox, I don't have an easy way to test it, but I'm willing to commit it, if it solves the problem.

@attiks: does this mean that you "don´t care" about the problems concerning IE?

We no longer use colorbox for sites we build, and I don't have a machine the easily test the IE versions, if you upload a patch that fixes this I'll commit it

Attached patch is a new approach to this issue.

// Only execute if there are elements to process.
if (this.length == 0) {return;}

This fixes the colorbox staying empty.

I also changed the resizing of the colorbox, because the current implementation produces different results when first loading the image and viewing it a second time. It also allowed for images larger than the screen, which required the user to scroll to view the entire picture.

I've tested the patch in safari, firefox and chrome on OSX and it works like a charm. Please test/review the patch for other browsers aswel, so we can have this fix committed.

I encountered some problems with the min/max height calculation which caused the controls to occasionally be positioned off screen because the colorbox would be too large. These issues are now fixed.

Attached patch fixes the ugly hack used to wait for the image to load completely.

And removed debug logging statement.

Correct patch now.

Tested patch #28 against 2.12, it still applies cleanly and works like a charm. Could use an extra pair of eyes.

Not sure if comment #6 is still being addressed here, but I tried the latest patch, and it isn't fixing the issues I'm experiencing.

Like Alan Puccinelli, I'm wanting to use this to apply Colorbox popups to all inline body images, which I'm serving responsively using Picture.

To be sure I hadn't missed anything, I downloaded the latest Colorbox library, and even the latest dev versions of the Colorbox, and Picture modules. Also toggled through all available versions of jQuery via jQuery Update.

Still, what happens is that if I apply the class colorbox-inline, or colorbox, all that happens when the image is clicked upon, the colorbox popup will display, but only showing the loading image.

Patch in #28 works for me! Thnx!

#31 @karolus can you confirm it is working?

Just applied the patch, still no change. Just loading image still popping up, only.

To be sure Colorbox itself was working, I created a new node, and bypassed Picture completely by hand-coding, and using the class "colorbox-insert-image" on one of the images I'm using with Colorbox Picture. This worked as advertised.

Also, did toggle the JS placement from footer to header in config, and all this did is break functionality altogether.

To show what the code looks like in this breakpoint image, below is the output. The only classes applied for content are sidebarsquare (this selects the proper picture grouping) and colorbox. The rest are added by the module.

<img id="" class="sidebarsquare colorbox init-colorbox-processed cboxElement lazyloaded" title="Carriage Pointe Welcome Sign" alt="" srcset="http://carriagepointe.dd:8083/sites/default/files/styles/focal_point_preview/public/1747-CarriagePointe_HomepageSign.jpg?itok=zn4LTe9u 250w" data-picture-align="right" data-picture-mapping="sidebar_square_mapping">

Did you try it on a clean install? Could be there is another module involved?

Sean, thanks for the reply.

I'm getting the same issue on another Drupal install, and attached are images.
The first is the created node, with a body field, and below that an image field. The first image is an inline image, placed using a Picture style, with the classes colorbox and colorbox-inline applied. The second is an image field, with Colorbox settings in the field display format. From what I see, like some previous posters, there's an issue with the interaction of Picture and Colorbox for inline images. Hand-coded Colorbox images as inline work, but not with the Picture module.

For some reason, the third image for #36 isn't displaying, so here it is:

I am closing all very old tickets that have not received comments for a long time. If someone still faces these issues or thinks they are relevant, please reopen it. Feel free to contribute with more info or a patch.