Image refuses to resize even via developer tools?

Question

Hey all,

I'm trying to customize a lightbox script (prototype) to make it resize images that are bigger than the viewport. I've successfully inserted a basic proof of concept to resize the lightbox overlay and everything that belongs to it, except for one important detail: the image itself won't resize.

I've tried adding the resize function (this.lightboxImage.writeAttribute('width', newWidth), where newWidth is the calculated new width) in different functions of the lightbox script but with no result. After some more testing I managed to check these off to make sure the problem wasn't in my script:

• The new width is calculated correctly
• The function is called after the image gets it's original width (the new width is not overwritten after setting it)
• Writing several different attributes are all successful

In fact, if I run:

this.lightboxImage.writeAttribute('width', newWidth);
alert(this.lightboxImage.readAttribute('width');

I get an alert giving 600 (my new width, resized from 1023px width). Even in the HTML the script generates it says <img src="pic.jpg" width="600" />. So then I used the dom inspector (both in Chrome and IE9) and tried to change the value, but even then the picture just stays fullsize.

What the hell is going on here and how do I fix it?

page: http://dev.mansonwiki.com/wiki/MySpace_%26_Facebook_Photo_Gallery_Archive (the first and fourth images should be resized to 600 in the lightbox)

script: http://dev.mansonwiki.com/w/extensions/LightboxThumbs/lightbox/js/lightbox.js (additions denoted by /** HACK: )

Answer 1

Rather than trying to change the width attribute, you could try adding a style to make it smaller, e.g.:

this.lightboxImage.writeAttribute("style", "width: "+newWidth+"px");