Hello,

I am using Colorbox to display multiple photos on a node. When viewing the photos in the Colorbox popup, the display varies according to browser and in all browsers other than IE, the picture cannot be seen. Can someone please advise if I am missing something in settings or how I might be able to resolve this issue? Screenshots for each browser are attached for reference.

Thank you in advance,
Melissa

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

frjo’s picture

Category: bug » support

Have you tried with a core theme like "Bartik", just to rule out that it's your theme that is the problem?

A link to a demo site where we can see this problem would make it easier to track down.

georgedamonkey’s picture

I'm having the same issue on my site. I'm using a custom zen sub-theme, but per your suggestion I tried switching to Bartik, and it has the same issue. Usually, clicking once shows a very small version of the picture (or none at all). If I close that and click the picture it's fine. But, it does it for every image, on every page load. You can see a demo of it here: http://beta.oshkoshpubliclibrary.org/aboutus/history

frjo’s picture

Status: Active » Closed (works as designed)

On that page you are using the "Media Colorbox" module. That is a separate module from this and is developed separately by different developers.

http://drupal.org/project/media_colorbox

oystercrackher’s picture

Status: Closed (works as designed) » Active

Changing this back to active as Media Colorbox is just a formatter that allows the use of colorbox with the media module. This issue still exists without Media Colorbox as I have tested this and experience the same results using just the colorbox module. Please see #2 as they are also having the same issue.

Any ideas on how to resolve this?

Thanks

frjo’s picture

The Media Colorbox module seems to be using some of the Colorbox modules settings but otherwise it's a completely separate implementation. It integrates directly with the Colorbox plugin via its own JavaScript, media_colorbox.js.

You need to show me an example site where you use the Colorbox module before I can help you.

sridharpandu’s picture

Title: Colorbox does not display properly in Chrome, Safari, and Firefox, but Internet Explorer is OK » Colorbox does not display properly on mobile devices
Version: 7.x-2.0 » 7.x-1.4
FileSize
888.9 KB

I used colorbox to display a webform. It works perfectly well on Firefox (Ubuntu), Safari (Mac) on the laptop but I have issues on the mobile devices.

Galaxy Tab 1 and Galaxy Tab 2 - Overall fine but the keyboard that appears whenever a text box is encountered appears over the textbox so the user is unable to see what's being typed (is there a way to handle this?)
HTC Desire - Fine on Firefox but in the default android browser the modal appears off the screen
Apple iphone 4 - Clicking the link doesn't pop-up the modal window
Sony Experia - The Close (X) button for the modal window does not appear.

Just want to mention that I am using a responsive theme which uses the LESS CSS framework.

You can check it here http://potlim.sastratechnologies.biz/welcome

Click the "Book a Table" link.

natigiat’s picture

Issue summary: View changes

hello,
you can go to colorbox
js/colorbox.js

and comment the matchMedia function (the secound function)

its will fix your prublem

cllamas’s picture

#7 fixed my problem, but I don't like hacking a module, do you know what could we do? Maybe we could add that option in the module to enable/disable mobile support?

_vid’s picture

I'm helping someone troubleshoot this problem remotely and I don't have the module installed here but looking at #7 the code in question is:

if (settings.colorbox.mobiledetect && window.matchMedia) {
		// Disable Colorbox for small screens.
		var mq = window.matchMedia("(max-device-width: " + settings.colorbox.mobiledevicewidth + ")");
		if (mq.matches) {
				return;
		}
}

So it may be a question of setting the mobiledevicewidth value and or setting mobiledetect to false. If that's available in the GUI.

On the site in question I see that Drupal.settings.colorbox.mobiledevicewidth is set to 480.
Using Safari Developer tools with my older iPhone, my $(window).width() comes out at 320 in portrait and 568 when in landscape.
It still doesn't work when loading the page in landscape, nor does it work on my friends iPhone 8 plus, but I don't have the viewport numbers on that device.

HongPong’s picture

I was able to get much better results with colorbox on mobile by setting the maxWidth attribute of the popup. A value like '95%' is quite good.

Trying to embed YouTube videos they will get too big (if you look carefully you can see they are bigger than the mobile viewport and disappear.

trazom’s picture

No 7 worked for me. Many thanks!

Neslee Canil Pinto’s picture

Status: Active » Fixed
Neslee Canil Pinto’s picture

Status: Fixed » Closed (fixed)