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