Symphony.

I have a page with a bunch of images on it. Each image is a different size and fits on a grid.

The images’ size are all controlled by JIT. It gets given a width and then it scales the image proportionally to get the height.

Each image has a hidden caption that is displayed using Javascript.

The javascript currently gets the size of the div in which each image sits (which gets it’s size from the image) and then positions the caption right in the center of the image regardless of how long the caption is or how high the image is. (you can see an example here.

My problem is that when the images are not cached the javascript runs before the images are fully loaded and so the effective height of the DIV that JQuery is measuring is 0px and all the captions load at the top of the images. On refresh though.. no problems…

I’m a bit of a JQuery noob (still very much in learner phase) so I wondered if there was some way Symphony could output the size of the image in the mark-up.. ie:

<img src="path/image.jpg" width="300" height="400"/>

Where the height could somehow come dynamically from JIT? That way the divs would have a height even if the image wasn’t loaded.

If that’s not a goer - any other ideas for how to make this work?

Thanks!

If you know one of the dimensions of an image you can calculate the other in XSLT as Giel posted here

Hope that helps!

Gold! Thanks so much. Such a simple solution - wish I’d thought of it myself!