Could not extract width/height from image in Webkit browsers

  • Problem
  • Updated 2 years ago
Could not extract width/height from image: http://de.mysite.com/Test/Viewer.php?.... Traced measures: width:0px, height: 0px

I get this error while iam trying to switch the first image in Chrome.
Ive got no problems in FF6 but in Chrome and Safari.

After searching in the forum i couldnt find this type of problem, just some suggestions by changing the users personal css "max-width: 100%" an so on;didnt work. Now i decided to fix it by myself, after some time i found:

// Delay the callback to "fix" the Adblock Bug
// http://code.google.com/p/adblockforch...
if ( ( !this.width || !this.height ) ) {
window.setTimeout( (function( img ) {
return function() {
if ( img.width && img.height ) {
complete.call( img );
} else {
Galleria.raise('Could not extract width/height from image: ' + img.src +
'. Traced measures: width:' + img.width + 'px, height: ' + img.height + 'px.');
}
};
}( this )), 2);
} else {
complete.call( this );
}

in the galleria-1.2.5.js and changed the else with img.width="100" img.height="100". After this i got it to work but of course not properly. I can switch the pictures but they are all in 280x280px.
Photo of myawak3

myawak3

  • 2 Posts
  • 0 Reply Likes

Posted 4 years ago

  • 15
Photo of Bartosz Grzesiak

Bartosz Grzesiak

  • 1 Post
  • 9 Reply Likes
I had same issue
Solution:
Replace code "Galleria.raise('Could not extract width/height from image: ' + img.src +
'. Traced measures: width:' + img.width + 'px, height: ' + img.height + 'px.'); " wit this try catch block :

try {
$('<img/>').attr('src',$(img).attr("src")).load(function() {complete.call( this )})
} catch(error_message) {
Galleria.raise('Could not extract width/height from image: ' + img.src +
'. Traced measures: width:' + img.width + 'px, height: ' + img.height + 'px.');
}
Photo of softobjects

softobjects

  • 5 Posts
  • 0 Reply Likes
I'm using Galleria in Wordpress (manually installed, not a part of a plugin) to run a slideshow.

This modification worked for FF 7 (Galleria *mostly* worked "out of the box" for the WebKit browsers, however I cannot get option carousel: false to hide the thumbnails) but IE8 times out and I get one timeout error per image after 30 seconds even though the slideshow is running behind the error messages so it seems to be related to being unable to load the thumbnails for the carousel because they don't load. I am letting the script render the thumbnails.

For IE9, every other image shows, beginning with the first one (so only odd ones). This is also the case if I use the clickNext option: Every other click shows an image, the other images don't show (stage background color shows) anything but background.

Could this be a side effect of this hack? Does it provide a clue as to what is going on?

Thanks for the workaround! If this is a bug, I hope it is fixed in the next release!

Thanks for any feedback.
Photo of softobjects

softobjects

  • 5 Posts
  • 0 Reply Likes
Yikes. The one-shows, one-doesn't-show bug is also happening in Opera (11.52).
Photo of softobjects

softobjects

  • 5 Posts
  • 0 Reply Likes
FWIW, I changed the transition from 'fade' to the default, and it solved the issue in Opera and IE9, but not in IE7/8.
Photo of Rich Smith

Rich Smith

  • 1 Post
  • 0 Reply Likes
great work Bartosz - this was a a showstopper as far as Galleria was concerned. Thank you!
Photo of Marcello Nuccio

Marcello Nuccio

  • 2 Posts
  • 0 Reply Likes
Load needs to be added before the src attribute:
http://stackoverflow.com/a/1257402/45...

I've posted a fix here:
https://github.com/aino/galleria/pull...
Photo of myawak3

myawak3

  • 2 Posts
  • 0 Reply Likes
OMG IT WORKED INSTANTLY! THANK YOU VERY MUCH!

i had planed to use my own scripted gallery today. :D
Photo of maxxacab

maxxacab

  • 1 Post
  • 0 Reply Likes
GREEEEAAAAATTTT :)

i had the same problem on wordpress 3.2.1 but with this trick the problem is SOLVED!!!! :D
Photo of Thomas Schmidt

Thomas Schmidt

  • 5 Posts
  • 0 Reply Likes
Same here in Opera 11/Ubuntu. The solution worked but should be included in the next update.
Photo of mateuscb

mateuscb

  • 1 Post
  • 0 Reply Likes
any idea when this will make it in the official download?
Photo of boodapotamus

boodapotamus

  • 8 Posts
  • 0 Reply Likes
Awesome! I've been working on this for months with no solution. Worked instantly!

By the way, my problem was with Firefox, every other browser worked perfectly.
Photo of tereza.simcic

tereza.simcic

  • 3 Posts
  • 0 Reply Likes
I tried this solution, but it didn't work on firefox ... any ideas? problem is FF 7 :(
Photo of johan.zatterstrom

johan.zatterstrom

  • 1 Post
  • 1 Reply Like
I had this problem as well in FF7, worked like a charm in Chrome and Safari.
Finally got it to work after hours of trying though, the ONLY thing I had to do was to rename the html-id of one of the surrounding div ́s. I have no idea why though?

First the div had an id of #content... Didn't work.
But oddly when renaming the div to #content-page... everything works!
Photo of simey.me

simey.me

  • 1 Post
  • 0 Reply Likes
Changing the name of #content to #content-box seems to have worked for me, as well. very very odd!! :) had all kinds of frustration before. Thanks. Johan.
Photo of tereza.simcic

tereza.simcic

  • 3 Posts
  • 0 Reply Likes
thanks, johan ... I solved the problem, it was my stupid idea to control loading gallery from external .js file ... there I made a mistake: gallery was initialized 2x :S
I'm really happy, because I was just to giving up, even these gallery really suits my needs :)
Photo of sondenkind

sondenkind

  • 1 Post
  • 0 Reply Likes
I am using Galleria .js in conjunction with the Galleria module for Drupal. I realized that it works with most of the themes flawlessly and the problem described occurs only with some themes (e.g. Corolla).

I applied the change in the .js code but it didn't solve the problem for me. I posted the problem in the Drupal Galleria issue queue but it was marked as 'closed' for the problem is not drupal module related: http://drupal.org/node/1308912

There seems a way to sort this out by defining width & height in the specific CSS but so far I couldn't figure out how.

Any hint to a solution would be gladly appreciated!
Photo of tereza.simcic

tereza.simcic

  • 3 Posts
  • 0 Reply Likes
I'm not sure if I can help you but I'll tell you about my epxeriences: as johan said he just changed the name of the div and galleria worked fine...and I changed my own .js file a bit and it worked nice.
But .. when I uplodaded files on the server, the same problem appeared and I figured out that this is because the server is slow and the galleria throw out this error because the time needed for upload exceeded. I added 'debug: false' as a quick dirty solution for FF, but in Opera the gallery didn't start at all untill I enabled turbo (opera's config)
In addition, I tried to load gallery automatically after f.x. 3s in .js file and when I tried to change that time to 4s, error came out again, but works fine if I change to 3.5s. Really strange :S obviously is not just setting for width and height ...
As suggested, I created thumbs separately and put the theme's .js file in a head (http://galleria.aino.se/docs/1.2/refe..., added 'thumbCrop:false, thumbFit:false,' and now seems to work nice :)
Photo of stefano

stefano

  • 4 Posts
  • 0 Reply Likes
Sorry, but adding:
width: 100%;
height: 100%;

in your css you'd solve the problem.

.galleria-stage {
overflow: hidden;
background: #000;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 30px;
width: 100%;
height: 100%;
}

Bye
Stefano
Photo of softobjects

softobjects

  • 5 Posts
  • 0 Reply Likes
This did not work for my instance (same symptoms in FF 7, and IE 8/9) of this problem.
Photo of dima78

dima78

  • 6 Posts
  • 0 Reply Likes
I installed Galleria inside of Wordpress and am having the same issue. In IE7 and IE8 none of the images load. The error says: "Image not loaded in 30 seconds..." Initially IE9 did not work as well, but after updating the JS file with try catch, it started to work.
Changing the DIV ID from "content" to something else does fix the problem. However, I don't think it is the way to fix it, since this is a native Wordpress DIV and is on every page and CSS.
Photo of dima78

dima78

  • 6 Posts
  • 0 Reply Likes
Found what causes the problem. It is a default image style (widht and height set to auto), applied in wordpress style.css

#content img {
margin: 0;
height: auto;
max-width: 640px;
width: auto;
}
Photo of softobjects

softobjects

  • 5 Posts
  • 0 Reply Likes
@dima78:

So you changed those to what? 100% ?
Photo of dima78

dima78

  • 6 Posts
  • 0 Reply Likes
I moved width and height to:

#content img.alignleft,
#content img.alignright,
#content img.aligncenter {
margin-bottom: 12px;
height: auto;
width: auto;
}

#content img {
margin: 0;
max-width: 640px;
}

and it fixed the problem.
Photo of David

David, Author

  • 1221 Posts
  • 143 Reply Likes
To everyone: this issue has been fixed in the latest beta:

https://github.com/aino/galleria/blob...
Photo of ivicapuljic

ivicapuljic

  • 2 Posts
  • 0 Reply Likes
> To everyone: this issue has been fixed in the latest beta:

Had a same problem. Upgrading to 1.2.6 version did not helped - still getting error in IE7/8/9 (didn't test IE6) - FF and Chrome are fine.

Trying different tricks with css width and height didn't helped.

On the end tryed Bartosz Grzesia solution and it worked, thx. So I wrapped Galleria.raise call in try/catch block and finally IE was happy.
Photo of David

David, Author

  • 1221 Posts
  • 143 Reply Likes
@ivicapuljic could you please point me to a link where this happens? We cannot recreate the problems using 1.2.6 anywhere. It would help up a lot.

As a side note: if you turn off debug, you won’t see any warning messages. You do that by passing debug: false as an option.

Thanks
David
Photo of ivicapuljic

ivicapuljic

  • 2 Posts
  • 0 Reply Likes
> @ivicapuljic could you please point me to a link where this happens? We cannot recreate the problems using 1.2.6 anywhere. It would help up a lot.

Hi David thanks for your reply. Sorry but I can not give you access to site we are developing with galleria module - it is a big corporate client and we are still not allowed to talk about this project.

I will try to ask them is it possible to give you access to this site so you can check - will let you know when I have more info.

P.S. thanks for debug flag tip.
Photo of Jason Anton

Jason Anton

  • 1 Post
  • 0 Reply Likes
I have it happening here: http://courtneyanton.com/galleries
By the time you get this I may fix it though.

This is a very frustrating bug. I'm using the drupal module for drupal 7like sondenkind and so far everything I've tried from this thread fails to fix the issue. I even paid for the fullscreen theme and now it seems I'm gong to have to find something to replace Galleria all together.

debug: false doesn't even seem to make a difference. This is a disaster...since changing to 1.2.6 the thing looks like crap in Chrome and Safari.
Photo of mikkelz

mikkelz

  • 1 Post
  • 0 Reply Likes
I've been getting this issue for the last few days, solution is below:

What I've found is that if you have the gallery in a hidden div (e.g. the CSS display property set to none), you need to initialize galleria on click (or whatever action) that triggers the displaying of your gallery (display = block).

On my implementation, the gallery is on my page, but not visible. When I click "View gallery" the gallery transitions in (using jQuery animations etc.). At this point only, do I call:

$("#gallery-wrapper").galleria({ ... });

So in summary, only intialize your galleria instance on the event that triggers the displaying of your gallery if it's default display is set to none.
Photo of mohamed.bouraga

mohamed.bouraga

  • 2 Posts
  • 0 Reply Likes
Hi guys i had the same probleme while using jqyery galleria and i solved it. I modified some parameters in galleria-1.2.5.min.js here is the link to download the library http://www.equipro-trucks.com/js/gall... copy the code and paste it in your js file
Good luck guys
Photo of David

David, Author

  • 1221 Posts
  • 143 Reply Likes
@mohamed please upgrade to the latest version (1.2.6) before posting any "fixes". Thanks!
Photo of

  • 2 Posts
  • 0 Reply Likes
Still having this problem. I've tried 1.2.6 and 1.2.7a2

I changed the stylesheet to add this rule

.galleria-image img {max-width: none;}

This fixed it in all browsers except IE 8/9 (probably others, but those are the only two I currently have.

So I tried the try/catch solution from above Bartosz Grzesiak, but it didn't help.

At this point, I'm pulling the plug on Galleria and looking for another solution, but for the time being you can see the sandbox version at:

http://d7.dev4.webenabled.net/trails/...

It's behind a password just to keep search engines out
user: guest
pass: scooby

Try it in both IE and in anything else - Firefox, Chrome, Opera and Safari all seem to work at this point.
Photo of David

David, Author

  • 1221 Posts
  • 143 Reply Likes
@Tom I’m surprised your page loads at all. I stopped counting stylesheets at 40 and you also have tons of scripts. The client has to work really hard to load all those resources and render a decent layout.
Photo of

  • 2 Posts
  • 0 Reply Likes
Yeah, so it goes with Drupal these days during development. Core stylesheets and JS, almost every module adds a stylesheet and maybe an JS file, the theme system adds several more stylesheets.

I wondered if the IE 31-stylesheet limitation was causing the problem. I turned on stylesheet and javascript aggregation, which brings the number of files down to a reasonable amount, but it's still a huge amount of code (so it goes with Drupal these days).

Aggregation doesn't help, but as I say, that only reduces the number of files, not the amount of code.
Photo of divydovy

divydovy

  • 4 Posts
  • 0 Reply Likes
Hi @David,

I've had the same problem here with IE not being able to retrieve image/height. The try block fix above works and the gallery works.

http://paperseven.pragmatic-web.co.uk... FWIW

Happy to help troubleshoot if I can.

David
Photo of David

David, Author

  • 1221 Posts
  • 143 Reply Likes
Just a quick question, if you remove he try/catch and pass debug:false, does it work in IE?
Photo of divydovy

divydovy

  • 4 Posts
  • 0 Reply Likes
Hi David, sorry to miss this - we've picked it up elsewhere.
Photo of Marcello Nuccio

Marcello Nuccio

  • 2 Posts
  • 0 Reply Likes
I've tried with galleria-1.2.6 and galleria-1.2.7b5 (from GitHub) on Firefox-10 and 11b. Applying the proposed "try catch fix" works for me.

How can I help to get this problem fixed?
Photo of Danielle Celucci

Danielle Celucci

  • 1 Post
  • 0 Reply Likes
Replacing the Galleria .js file for this one: http://drupal.org/files/galleria-1.2.... was my solution for this problem. Just sharing. :)