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 <[email protected]> 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/
