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
