Comments

attiks’s picture

Colorbox support added, but the image in the colorbox doesn't always resize correctly in FF max-height: 100% isn't working

Other 'problem' is that the colorbox images are loaded on page load, which isn't good for performance.

attiks’s picture

If you want to try it make sure to create 2 breakpoint groups (probably containing the same breakpoints)

attiks’s picture

colorbox images are lazy loaded, but they will all load when one is opened.

attiks’s picture

I ran some tests and the lazy loading works if you only have some images (< 10) on a page, if there're more it becomes slow, so we need a better way (AJAX) to handle this.

iwuv’s picture

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.

iwuv’s picture

FileSize
237.67 KB

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?

attiks’s picture

Colorbox is supposed to snap to the container, but it might be possible that there's a race condition between the picture javascript and the colorbox one. Or maybe there's a size specified on the colorbox link?

Besides your problem, there's another one, the lazy loading has side effects, the current implementation was just a proof of concept, but we need to find a better way to implement it.

attiks’s picture

Status: Active » Needs work

Marking as NW so I can keep track of it, but if anybody else has a great idea on how to solve this

4kant’s picture

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.

attiks’s picture

#9 this needs work, but I don't have any time for the moment. The lazy loading 'works' but is not ideal, so maybe it's best to try without that code (try uncommenting line 610 of picture.module)

das-peter’s picture

Status: Needs work » Needs review
FileSize
15.3 KB

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

das-peter’s picture

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

attiks’s picture

Status: Needs review » Fixed

I had a quick look and it looks good to me, I assume you tested it ;-)

carlos.macao’s picture

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'),

das-peter’s picture

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

attiks’s picture

@das-peter: how did you solve the problem in #14?

das-peter’s picture

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

barber75’s picture

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

attiks’s picture

#18 I works similar on how it works for normal images, you have to select 2 picture groupings. Everything should be possible to do using the GUI.

barber75’s picture

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

attiks’s picture

Status: Fixed » Needs work

All patches are in the latest dev version, the snapping is probably caused by a race condition. I'm still no it sure what the best way is to solve this.

barber75’s picture

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

attiks’s picture

What you want is possible, the grouping is build by das-peter, I never tested or used it.
Regarding the snapping, I'm not working on this since I don't Ned it and have other things to do, so somebody has to provide a patch to move this forward. The same goes for the handling of the pictures in the colorbox.

R2-D8’s picture

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

atiba’s picture

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.

das-peter’s picture

Status: Needs work » Needs review
FileSize
555 bytes

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.

das-peter’s picture

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.

attiks’s picture

Status: Needs review » Fixed

Thank you!!!

4kant’s picture

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!

4kant’s picture

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

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

timlie’s picture

#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.

4kant’s picture

#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 ....

marcvangend’s picture

Issue summary: View changes

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

  • Commit 3681910 on 7.x-1.x, picturefill2 by attiks:
    Issue #1881898 by attiks: Added Colorbox support.
    
  • Commit ca3947f on 7.x-1.x, picturefill2 by attiks:
    Issue #1881898 by attiks: Added Colorbox support, height fixed
    
  • Commit 9e22aa2 on 7.x-1.x, picturefill2 authored by das-peter, committed by attiks:
    Issue #1881898 by das-peter | attiks: Added Colorbox support.
    
  • Commit 4ba6a7d on 7.x-1.x, picturefill2 authored by das-peter, committed by attiks:
    Issue #1881898 by das-peter | attiks: Added Colorbox support.
    

  • Commit 3681910 on 7.x-1.x, picturefill2, 7.x-2.x by attiks:
    Issue #1881898 by attiks: Added Colorbox support.
    
  • Commit ca3947f on 7.x-1.x, picturefill2, 7.x-2.x by attiks:
    Issue #1881898 by attiks: Added Colorbox support, height fixed
    
  • Commit 9e22aa2 on 7.x-1.x, picturefill2, 7.x-2.x authored by das-peter, committed by attiks:
    Issue #1881898 by das-peter | attiks: Added Colorbox support.
    
  • Commit 4ba6a7d on 7.x-1.x, picturefill2, 7.x-2.x authored by das-peter, committed by attiks:
    Issue #1881898 by das-peter | attiks: Added Colorbox support.