One of my favorite books is Dom Scripting by Jeremy Keith. I’ve used his concepts for a gallery I designed for my dad’s portfolio. Well in the process of making updates to that site I ran into a problem. I wanted to display wider images than normal for one of the pages, to not have to reduce the images down to fit on the page. I turned on scrolls for the overflow adding to the CSS rule for the gallery div. That’s when it all went south.
The original code loads a new image into the existing DOM node placeholder image. So if the images are different sizes the div resizes and voila. Of course during the update I changed the placeholder image and failed to notice that the image now had width and height data. That’s normally a good thing, but in this case it forces any images loaded into that placeholder to assume the dimensions of the placeholder…Resulting in nicely stretched and distorted images. drat. I ran through the full range of JavaScript options, I found at least 6 different ways to code the exact same thing, with some being slightly better, others a complete disaster. The true irony was that the original code did exactly what I wanted it to do, but because I had inadvertently populated the width and height of the placeholder, I broke it. Lesson learned.
For reference here is the code I was using to “force” the images to load with the correct size:
placeholder.setAttribute(“width”, “whichpic.imgWidth”);
placeholder.setAttribute(“height”, “whichpic.imgHeight”);