It would be wonderful if I am wrong, but I don't think you can get the image
dimensions via JavaScript. But you don't need to...
style
a.preview {
max-width: 200px;
max-height: 200px;
}
/style
This will force the image to fit within a 200px by 200px window without
altering the image aspect ratio.
On Mon, Jan 4, 2010 at 6:51 AM, banacan banaca...@gmail.com wrote:
I'm using Preview.js to create image previews on hover. The script as
it is now displays the full size image on hover, but that is often too
big. I have been able to reduce the preview size by defining
width='200px' which works fine in many cases, but when the image is
tall and narrow a 200px wide image my be 700px tall. So what I'm
trying to do is determine the image dimensions and if the width is
greater than the height, set width='200px', otherwise set
height='200px'. I haven't been able to figure out how to get the
image dimensions from the wrapped set.
Here is an excerpt of my markup:
a href=?php echo $mainImgDir . $mainImg; ? class=preview
title=?php echo $mainImg; ?img src=?php echo $thumbsDir . $image;
? alt=?php echo $image; ? class=center //a
Here is an excerpt of my js code:
$(a.preview).hover(function(e){
this.t = this.title;
this.title = ;
var orientation = ((this.img[src]).width()
(this.img[src]).height()) ? ' alt='Image preview' width ='200px' / : '
alt='Image preview' height='200px' /);
var c = (this.t != ) ? br/ + this.t : ;
$(body).append(p id='preview'img src='+ this.href +
orientation + c +/p);
Can anyone see what I'm doing wrong?
TIA
--
John Arrowwood
John (at) Irie (dash) Inc (dot) com
John (at) Arrowwood Photography (dot) com
John (at) Hanlons Razor (dot) com
--
http://www.irie-inc.com/
http://arrowwood.blogspot.com/
