Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.
When I view gallery images in the colorbox mode, they looks as expected in Chrome, IE, and Opera, while in Firefox (v.9.0.1) the colorbox looks downsized.
This is an example of the colorbox html code for a specific image viewed in most browsers:
<img width="540" height="405" typeof="foaf:Image" src="http://n1.localhost/files/styles/media_gallery_large/public/DSC00429.JPG" alt="">
And this is it for the same image viewed in Firefox:
<img height="405" width="540" alt="" src="http://n1.localhost/files/styles/media_gallery_large/public/DSC00429.JPG" typeof="foaf:Image" style="width: 250px; height: 188px;">
As you can see, there is an extra "style" attribute that somehow appears in Firefox and downsizes the colorbox image from 540x405 to 250x188.
(A strange thing is that this bug is not 100% reproducable: some images in a media gallery may look as expected, while other are downsized)
Comments
Comment #1
Moloc CreditAttribution: Moloc commentedWhat width and height values do the images have...
... which look as expected? (are they lower/the same/greather than 540x405?)
... which are downsized? (as of #0 this is 540x405)
If you have a downsized image, click on the image, to get to the details page. Replace the word "detail" in the current url to "lightbox" and open the new url. Is the image still downsized?
As it affects only one browser, are you sure, that it is no cache-problem?
Comment #2
cruzeazy CreditAttribution: cruzeazy commentedI'm having the same problem.
Tried different themes.
Using:
Media Gallery 7.x-1.0-beta7
Media 7.x-1.0-rc3
Colorbox plugin 1.3.19 (had 1.3.17 same problem)
Comment #3
Moloc CreditAttribution: Moloc commented#2 Does it work in all browsers except in Firefox, as the issue starter said? Can you give an answer to the questions in #1?
- Is there a public installation available with this problem?
Comment #4
cruzeazy CreditAttribution: cruzeazy commented#3
Yes its only a Firefox problem. I cleared everything on Firefox including cache.
Which look is expected? width of 500px, height is width dependent. So greater than the displayed dimensions.
See it here: http://csphoto.seleqta.com/node/1
Comment #5
Moloc CreditAttribution: Moloc commentedIt seems to be a Theme issue.
File: http://csphoto.seleqta.com/sites/all/themes/arctica/arctica/styling/css/...
There you can find the following lines:
If i remove height: auto; it works for me. Can you confirm that?
Comment #6
cruzeazy CreditAttribution: cruzeazy commentedYes, removing height:auto fixed it.
Thank you.
Comment #7
RynoRn CreditAttribution: RynoRn commentedRemoving that one line CSS didn't fix the problem for me.
Here is my solution for the problem:
https://github.com/jackmoore/colorbox/issues/210
Hope it helps!
Comment #8
lsolesen CreditAttribution: lsolesen commentedCould this issue be closed?
Comment #9
lsolesen CreditAttribution: lsolesen commentedComment #11
anavrin CreditAttribution: anavrin commented#5 solved my problem. I also add that I had some minor problems with styles when I was using default skin of colorbox.
When I chose example1 - everything looked much better.
Here is an example of usage: http://med4kids.pl/med4kids-galeria
Thanks Moloc for Your help.
regards,
Marcin
Comment #12
SocialNicheGuru CreditAttribution: SocialNicheGuru commentedThank you for this.
Once I clicked on the image
the empty colorbox at full size would appear
then shrink
then the image would be inserted and cut off since the colorbox itself was small
If I was to come back to it, then it might open with image at the correct size.
I had to remove "height:auto;" from my theme(s):
profiles/openatrium/modules/panopoly/panopoly_images/panopoly-images.css
profiles/openatrium/themes/oa_radix/assets/screen.css
I am not sure what ramifications this might have.
It might be better to define a colorbox class for each image passed into colorbox and make sure the css settings override that instead of just the id img.
Comment #13
ascii122 CreditAttribution: ascii122 commentedthanks for this fix. It was driving me nuts. Removing height:auto from the theme did the trick.
Comment #14
jordilopezamat CreditAttribution: jordilopezamat commentedCSS trick seems to solve the problem , but has secondary effects in other site images
Have tried
https://www.drupal.org/node/1851848#comment-6916220
, despite being a a radically diferent option in terms of format&design
it works fine for me.
Thanks