I believe John is correct on both counts. You can't get the image
dimensions before loading the image and the css method will work
unless you have to support versions of IE lower than 7.
In any case this script should work. To prevent seeing the full size
image before it resizes, hide the preview image with css and then show
it at the end of the hover on function.
$("a.preview").hover(
function(){
var imgSrc = this.title;
$("body").append('<p id="preview"><img src="'+ imgSrc + '" alt="Image
preview"</p>');
var preImg = $('#preview img');
if (preImg.width() > preImg.height()){
preImg.width(200)
}
else{
preImg.height(200)
}
},
function(){}
)
Michael
On Jan 5, 3:11 am, John Arrowwood <jarro...@gmail.com> wrote:
> 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/
