I am using the colorbox integration of slick module. I have chosen "image to colorbox switcher" and it is working.

The only thing I do not understand at this moment is the calculation of width and height for the iframe colorbox. It seems that this calculation is made automatically. But it always defaults to the full available width of the browser window even if the image is not that large. Is this by design? From other colorbox implementation I knew that the colorbox windows is just as big as the image.

For the height it seems the calculation is made based on the height of the image. But there is a margin around the body, so that a scroll bar is displayed.

Am I doing something wrong implementing the colorbox? Any chance to maybe set the width (and height) of the colorbox iframe manually?

Any help is highly appreciated.

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

stefan.korn created an issue. See original summary.

gausarts’s picture

Status: Active » Postponed (maintainer needs more info)

Thanks for the report. This colorbox part really needs more love ;) Please help if you can. Thanks.

Could you provide screenshots with the problem mentioned?
Is it iframe or image which is the issue?

Perhaps we can read from the data attributes to determine the dimensions rather than hardcoding it as of now.

stefan.korn’s picture

FileSize
66.74 KB

Hi, thanks for your fast response.

I attach a screenshot showing the colorbox. The image is only about 600 pixel, but the colorbox modal is filling the whole browser window and also there is a vertical scrollbar, albeit there is no need for this because browser window has enough space left.

I will be glad to help if I can. Can you direct me into where I should be looking regarding the calculation of width and height for the colorbox?

stefan.korn’s picture

FileSize
27.72 KB
gausarts’s picture

FileSize
289.8 KB

Thanks for the capture.
It was working fine before, but seems broken at one point of release.

To hide scrollbar, you need to enable "Custom", not "Default" at:
admin/config/media/colorbox

Find "Scrollbars", choose "Off".
Uncheck "Fixed" if you have various heights.

However I will add a fix when I can.
Attached is showing the proper dimensions after the fix.
Please allow some time for the proper checks.

gausarts’s picture

Title: Colorbox integration iframe width? » Colorbox integration has broken iframe width
Version: 7.x-2.0-beta4 » 7.x-2.x-dev
Category: Support request » Bug report
Status: Postponed (maintainer needs more info) » Needs review
FileSize
8.19 KB

Attached is the fix against the latest DEV, not beta4.
Basically reading the dimensions from the file entity view mode as supplied by the latest DEV.
You may need to define the expected dimensions at the file view mode.
Also removed img and node contents, but iframes.
The images dimensions will use the ones specified at admin/config/media/colorbox.

gausarts’s picture

The update is to clean up the slick.colorbox.css to use "colorbox-on--media" rather than separate "colorbox-on--audio" + "colorbox-on--video" for the video/audio colorbox body classes.

  • gausarts committed 060ce67 on 7.x-2.x
    - Simplified slick.colorbox.css to use "colorbox-on--media" rather than...
gausarts’s picture

Status: Needs review » Fixed

Feel free to re-open if still an issue. Thanks again.

Status: Fixed » Closed (fixed)

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

Dr.Osd’s picture

FileSize
371.45 KB
738.21 KB
908.29 KB
452.86 KB
61.58 KB
1.92 KB

I am also using the colorbox integration of latest dev release of slick module. Colorbox work good, but iframe size is wrong! I followed the instructions from the comment #5 and it did not help.
1of1.png - single portrait image with wrong iframe size.
1of3.png, 2of3.png, 3of3.png - landscape photos which have same size 960x640px. First and third image have good size but second image have wrong iframe size.
JQuery 1.7
Theme - Omega 3 or Bartik.
I try to disable more modules for my choise who can conflict with slick+colorbox but this not help.
Field and Slick Carousel settings attached.

Dr.Osd’s picture

Status: Closed (fixed) » Needs work
gausarts’s picture

Status: Needs work » Postponed (maintainer needs more info)

Thanks for the report.

Seems inconsistent display between your screenshots?

One is good the other is bad, isn't it?

Please provide more details:
1. Does the bad one only happen when you do resize window? Or happen for certain dimensions?
2. Please send me the Colorbox settings page from: admin/config/media/colorbox
3. Please try responsive Bartik and see if this time colorbox works with it? I have no issue using this theme as a basic for the module works since core Bartik is not responsive and not good for slick.

I tried all the colorbox skins with different image dimensions including a mix of video and images, but I couldn't reproduce it yet.

But I did notice it with some colorbox skins only when I did resize window. Did you see the bad display only after resizing, too? And fine without resizing?

If I could reproduce it consistently, I may be able to see the issue better.

gausarts’s picture

FileSize
106.62 KB

I attached a screenshot of colorbox settings that works nicely with any given colorbox skin. Maybe you want to try matching the settings first?

Dr.Osd’s picture

Yes, one is good, other is bad!
1) The bad one happen in any case, resize window or no. It is happen for various dimensions but not every time. For example 1of3 and 3of3 images have 960x640 sizes. All three images are loaded in one node.
2) Attached.
3) Responsive Bartik not help.

To reproduce this try use Big image size, bigger than screen size.
After some testing I suppose that colorbox try to calculate iframe size based on original image size instead of image style size or real image size.

I try clear install of latest drupal + colorbox + slick latest dev.
Change article image field to unlimited.
Upload 6 big photo and try several configurations of slick and colorbox settings. All bad!
If I try swith display image field format to colorbox - work good. But slick display image field format+colorbox bad.

gausarts’s picture

Thanks, that is very helpful.

2) Attached.

... You forgot to attach the Colorbox settings ;)
It is important for me to see if any combination of options may help me reproduce the bug.

In the meantime, till we find the culprit, please try changing your colorbox settings to match mine above:
https://www.drupal.org/files/issues/colorbox-settings-ok.png

And please let me know if that helps.

If not, I'll see if I can find anything to reproduce it first. Once I can reproduce it, I may be able to start seeing the bug to work with.

Most of my images are already larger than screen, but can not reproduce it yet consistently.
As said only when resizing the frame is bad. But since resizing is not a real issue, only devs do resize windows, I am looking for more consistent bugs that happen without resizing.

Dr.Osd’s picture

FileSize
319.36 KB

:) sorry
colorbox settings

Dr.Osd’s picture

Maybe I can help You via this way: You can download my clear drupal installation with this bug.
https://drive.google.com/file/d/0B6YBgPHFR7yAT3pJX0ljWlZiRk0/view?usp=sh...

gausarts’s picture

Hmm, it is pretty much similar, and you still have the issue :(

I wish I could reproduce it.

Attached are the results of the above Colorbox settings at my clean install, and I see no evil.
The image sizes are scaled to 2800px, and upscaling allowed. The video looks good, too.

A few small things can affect it. It can be the slick.colorbox.min.js, or any custom CSS rules, some other module integration, or anything I am not aware of just yet ;) And I am not sure what it is yet.

Once I could reproduce it, I may be able to work with it, otherwise no clue yet as it is all good at my install.

Don't worry I don't underestimate your issue, but I just couldn't reproduce it yet ;)

Also if you have a link to the site with the colorbox display, that will be helpful.
You can use my contact form if the site is private.

Again resizing is not counted a bug, it is the way most non-responsive lightbox issues which I could not do much about it yet. If the issue is due to resizing, we'd better close it as colorbox is not responsive by default. In such a case, you may want to consider Photobox which is responsive by default.

It is happen for various dimensions but not every time.

Don't hesitate to provide detailed steps to re-produce it if you have consistent display bugs.

gausarts’s picture

I just checked your install, and matched mine to yours, colorbox version, slick version, except jQuery Update version, I used 3x, but that is not real issue, and can not reproduce it yet.

When I can reproduce it, I'll surely try to fix it.

Don't hesitate to provide more info if you find anything, or have a link to the site.

Thanks.

Dr.Osd’s picture

Thank you for your responsiveness! :)
Send prived message..

gausarts’s picture

Status: Postponed (maintainer needs more info) » Fixed
FileSize
520.65 KB

Thanks. Now I see the problem ;)

The image is not supposed to be framed.
It is most likely if you have a temporary/testing URL at your hosting.

You can also test regular colorbox images without slick and see if the images are framed as well.

I recommend you have a local stage using aquia desktop, bitnami, xampp, wamp, etc.

Since the behavior is specific to your hosting which hijacks the image into an iframe, we can't do nothing about it. Please switch your dev environment accordingly, and colorbox should be good.

If it persists later at your full host, then switch the host ;)

gausarts’s picture

FileSize
461.5 KB

Attached is the correct colorbox for images. They are not framed...

Dr.Osd’s picture

This problem exists on my localhost Ubuntu LAMP and on my standart drupal shared hosting with all my sites.
Now I swith image field formatter to colorbox. Re-open link please. All is good.
Maybe I can change some server settings like php.ini or other?

gausarts’s picture

I am afraid this is beyond me. But I am happy to provide you some info, hopefully you can track down the actual issue within your install.

Note I removed non-essential attributes to allow you see difference.
Standard colorbox:
<a href="a.jpg?itok=rIbGpQY-"><img src="a.jpg?itok=MHJg-f9b"></a>
It has image tokens at both link HREF and image SRC. No target="_top".

Your colorbox without slick:
<a href="b.jpg" target="_top"><img src="b.jpg?itok=aqZ0OFlh"></a>
It has NO image token at link HREF, but has target="_top". It does have token at img SRC.

Meaning you do customize link for non-slick.

You suppressed image token with a module, or do custom link with target="_top" which successfully block any frame.
This means you have overcome the problem with your own custom workaround ;)

But the underlying problem remains, your host/server actually frames images, only this time you or some custom work/module do some workaround with target="_top".

This impresses things are okay, but not.

Perhaps temporarily you can do preprocess to slick__colorbox link to have a target="_top" as well?

But again you should address the actual problem first, as this may ramify to other use cases as well.

gausarts’s picture

You can try adding the following to one of your custom JS within a Drupal.behaviors:

$(".slick__colorbox", context).attr("target", "_top");

E.g.:

(function($) {

  Drupal.behaviors.framebuster = {
    attach: function (context, settings) {

       $(".slick__colorbox", context).attr("target", "_top");

    }
  };

})(jQuery);

And see if the frames are removed. No test, of course, as I don't have those frames, but worth a try ;)

Dr.Osd’s picture

Sorry, my english is slow and sometimes I understand you not at all.
I did not understant, why my clear drupal installation with colorbox and slick give me good work of colorbox but bad work of colorbox via slick? I test it on different host (localhost and two hosting company). The problem is not with the hosting!

Detailed steps to reproduce:
1. Now I try new hosting and install jQuery Update 7.x-2.7, Slick 7.x-2.0-rc2+8-dev, Colorbox 7.x-2.10, Chaos tools 7.x-1.9, Libraries 7.x-2.2
2. Then I download https://github.com/jackmoore/colorbox/archive/1.x.zip and https://github.com/kenwheeler/slick/ libraries.
3. Set unlimited number of values of standart image field settings of article node type.
4. Then change image field display settings to slick format with media switcher "image to colorbox".
5. Add first article with 3 big pictures.
6. Clear all caches.
Now we have same problem. Look at this on new host http://svitlo.1gb.ua/node/1

Just in case I sent access to drupal installation in prived message.

gausarts’s picture

Let me see if I can see anything ;)

Dr.Osd’s picture

Ok. I change colorbox image style to 480x480. Look now please.

gausarts’s picture

Status: Fixed » Needs work

Oh my, I could reproduce it at a clean install at a remote site.

You've found the bug, thank you very much!
Thanks for being persistent with it. Very much appreciated.

Of course I didn't see the issue locally as I gave you the screenshots before.
And since I switched from Colorbox to Photobox most of the time, I didn't really notice this issue till now.

Allow me some time to figure out if anything obvious I missed.

In the mean time you can try Photobox like I did.

Dr.Osd’s picture

:) Thanks.
I think problem in calculating colorbox size from original image size instead of current image style which used in field display settings.

gausarts’s picture

The problem is slick.image.inc is expecting a type image which is only available if you install Media, but not if core only ;)
We'll add a fix shortly. Thanks.

gausarts’s picture

Status: Needs work » Needs review
FileSize
845 bytes

Attached is the fix to address missing type image...
This may go to another issue, but the most obvious proof of the mistake is indeed colorbox display ;)
So here it is.

gausarts’s picture

Note: If you install the Media module without configuring anything, just clearing cache, it will immediately fix itself ;)

  • gausarts committed 6aa8f5d on 7.x-2.x
    - Issue #2546614 by Dr.Osd: Colorbox integration has broken iframe width
    
gausarts’s picture

Status: Needs review » Fixed

Committed for wider test. Please let me know if your issue is really fixed with it now ;)
Thanks.

Dr.Osd’s picture

Thanks. New dev release work perfect. Thank you for your work!

gausarts’s picture

Thanks for confirming. Glad it's resolved now ;)

Status: Fixed » Closed (fixed)

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