John and Michael,
Thanks to you both. I haven't checked the board in a while and I was
pleased to see your replies. I'll give it a shot.
On Jan 5, 9:03 am, devilmike <devilm...@gmail.com> wrote:
> 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/
