Colorbox support

First off, thank you very much for adding Colorbox integration. I've been testing and I love the ability to set a different breakpoint group for the image in the Colorbox modal window. Awesome!

I can confirm that lazy loading works. My browser doesn't load the colorbox image until it needs to be loaded in the modal window.

The issue I am having is the modal window doesn't snap to the size of the image displayed within. Findings attached.

For testing, I switched the image formatter to Colorbox and the modal snapped to the image as designed. So I don't think it's my Colorbox installation.

Is this normal behavior at this point?

Same problem as #6 here:
it´s already the colorbox-container that doesn´t keep the aspect ratio (div id="colorbox").
I did not find where it gets it´s value from.

I've extended the existing colorbox integration to support the flexslider picture integration as well.

Added grouping to the colorbox support. That way the images of the same field, the same flexslider list, are grouped within an colorbox "gallery".

I've tested. It worked for me. The only problem I had, which remains, is this: https://drupal.org/node/2003982

I've did a dirty hack into picture.module:

'query' => array('maxWidth' => '80%', 'maxHeight' => '80%', 'width' => $item[width], 'height' => $item[height], 'inline' => 'true'),

@attiks Awesome, thanks! And yes I tested it as good as possible - and the testing continues :) Patches will be delivered if necessary.

@attiks: I've to check that first. I was focused on the "technical / backend" integration details so far.

Hey,

How exactly is colorbox actually supported in the PIcture module? Is there any documentation anywhere? I want to be able to add responsive images to my colorbox popups as well as the images themselves on my page.

Is this possible through the GUI? Or do i need to do this with some scripting?

I am currently applying picture to my images on my page, and then adding the colorbox functionality with code.

Thanks,
Craig

Ok, cool, I figured out how to the get the colorbox integration working.

I'm having the same issue as #6. The colorbox window not snapping. Is a fix provided within the patches provided? Or has all that since been moved into the code base?

Thanks,
Craig

Ah ok, cool. I will wait and sit tight for the snapping :)

As for the patch that was given to group images that are in the same content type, or field. This is in code base now? The only option I see to group is on the content type itself when in 'manage displays' but can't see it anywhere else....

I have a flexslider view, with colorbox passing in my node id displaying a gallery with an embedded view. When a user clicks on one of these images, and sees the colorbox, i want them to be able to scroll through....

Is this possible?

Thanks,
Craig

Colorbox works well so far, but I'm having best results with the following tweaks...

(1) without colorbox-size-values:

'query' => array('inline' => 'true'),

(2) without lazy loading capabilities:

//$colorbox = str_replace('span data-picture=""', 'span data-picture-lazy="lazy"', $colorbox);

With this setup, only Google Chrome is making problems for me. Other browsers seem to work fine.
But i know about the downsides...
- we loose lazy loading; some machines may fail with this in some scenarios
- image resizing works, but the colorbox wrapper won't. It gets only calculated once per page load. (I'm fine with that for now.)

One last thing I'm lookin at is how to merge colorbox support into inline functionality.
But therefore I've created another issue: #2035821: inline colorbox support

I'm having the same issue as #6. I tried the tweaks from #24 and that fixed the colorbox layout though (colorbox snaps to the image). But like #24 described: it's far from perfect.

I think we really should patch the query thing. This makes it already better a lot.
Here's the required patch.
Lazy loading could become an option I guess - but I don't have the time to integrate this atm.

I've just worked on the lazy loading issue with colorbox.
For me it seems link the error happens because the colorbox code is unable to determine the dimensions of the image because the image isn't loaded when the colorbox is build.
However there's already code for the lazy loading images as soon as the colorbox is built.
I've extended this code to trigger a colorbox resize. An I assume that the onload event for the image in the picturefill code could make the whole thing responsive as well.

Thanks all for your work.

Colorbox Support has to be activated in the content type´s image field display tab by using picture as the display format and then colorbox as the link "target". In the link target you get the option to choose the picture group you had created for the responsive colorbox image styles.

(It took me a while to find that out...)

But: images that open up in the colorbox do not yet fit exactly to the browser´s window.
I installed latest stable version of picture - do I still have to patch something?

Thanks again!

...and: opening a colorbox by clicking on an image that´s inside a multiple value field the navigation arrows are missing.

#30 Did you manage to get the images in one colorbox gallery?
If I use the colorbox link, I only get the clicked picture in the colorbox. I can't click through the other pictures of the node...
Clicking on another one gives the same output.

#32: sorry - I did´nt.
I´m again using resp_img (which doesn´t deliver different responsive styles - but one chosen image-style that works as expected. I´m using a middle size there, like the one I had taken for a tablet. And multiple-value is no problem there.)

If someone has good news concerning this issue ....

Please see #2203837: Colorbox integration is too "agressive" for a related/follow-up bug.