Early Bird Registration for DrupalCon Portland 2024 is open! Register by 23:59 PST on 31 March 2024, to get $100 off your ticket.
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
Comment | File | Size | Author |
---|---|---|---|
#6 | GalaxyTab1.jpg | 888.9 KB | sridharpandu |
Colorbox_Photos_Internet_Explorer.pdf | 39.02 KB | oystercrackher | |
Colorbox_Photos_Safari.pdf | 27.91 KB | oystercrackher | |
Colorbox_Photos_Firefox.pdf | 26.68 KB | oystercrackher | |
Colorbox_Photos_Chrome.pdf | 28.49 KB | oystercrackher |
Comments
Comment #1
frjo CreditAttribution: frjo commentedHave 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.
Comment #2
georgedamonkey CreditAttribution: georgedamonkey commentedI'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
Comment #3
frjo CreditAttribution: frjo commentedOn 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
Comment #4
oystercrackher CreditAttribution: oystercrackher commentedChanging 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
Comment #5
frjo CreditAttribution: frjo commentedThe 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.
Comment #6
sridharpandu CreditAttribution: sridharpandu commentedI 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.
Comment #7
natigiat CreditAttribution: natigiat commentedhello,
you can go to colorbox
js/colorbox.js
and comment the matchMedia function (the secound function)
its will fix your prublem
Comment #8
cllamas CreditAttribution: cllamas as a volunteer commented#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?
Comment #9
_vid CreditAttribution: _vid commentedI'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:
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.
Comment #10
HongPong CreditAttribution: HongPong as a volunteer and at kor group commentedI 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.
Comment #11
trazom CreditAttribution: trazom commentedNo 7 worked for me. Many thanks!
Comment #12
Neslee Canil PintoComment #13
Neslee Canil Pinto