> jquery core provides teh width() and height(), that's all you need. Dimension > is not needed > for this. > > you get the available screen space just like that: $(window).width() and > $(window).height() > > then basically, you create an image object > imgPreloader = new Image(); > and when that object is loaded, you check its size and compare it to the > window, then modify > the image size and the modal window size so that it nicely fits inside the > screen space. > that's what my code does at least...
That sounds good, Alexandre. Are you returning a the "imgPreloader" variable back to the server to process your image server-side, or is everything being done on the fly client-side? Well, after looking more closely at your code, I can see you're setting the img attributes based on the window dimensions... good idea. I'll have an even closer look at your code. Thanks for sharing! Rick > -----Original Message----- > From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On Behalf Of > Alexandre > Plennevaux > Sent: Tuesday, January 15, 2008 11:02 AM > To: Jquery-en > Subject: [jQuery] Re: jqmodal autosize to fit contained image in window > > > ---------- Original Message ---------- > To: Jquery-en (jquery-en@googlegroups.com) > From: Rick Faircloth ([EMAIL PROTECTED]) > Subject: [jQuery] Re: jqmodal autosize to fit contained image in window > Date: 15/1/2008 16:51:16 > > Hi, Alexandre... > > I'm going to be working with having images sized as closely > as possible to a user's browser window size and so I'm interested > in what you're doing. > > I was wondering if the "Dimensions" plug-in might be helpful to > simplify what you're trying to do. (And what I'll be trying to do, too. > Your code is above my head, for sure). > > Anyway, I'm going to try to use the Dimensions plug-in, get the users > browser size, return that to the server via AJAX or a cookie, then > either dynamically create an appropriately size image or pull up one > of several sizes that I've already created and stored on the server. > > Dynamically creating an image of significant size could be too slow. > The drawback of creating multiple variations of an image and storing > them on the server means sacrificing server space for the images. > > Not sure which way I'll go. This is for my photography and Real Estate > websites. Most viewers want to see as large a photo as possible. And > the large photos do have a powerful impact on a viewer. > > Thoughts? > > Rick > > > -----Original Message----- > > From: jquery-en@googlegroups.com [mailto:[EMAIL PROTECTED] On Behalf Of > > Alexandre > > Plennevaux > > Sent: Tuesday, January 15, 2008 10:40 AM > > To: jQuery (English) > > Subject: [jQuery] Re: jqmodal autosize to fit contained image in window > > > > > > ok i kind of managed, if anyone interested, i did it like this: > > > > $('a.jqmodal').bind('click',function(){ > > imgPreloader = new Image(); > > //var mOffset = $('#modalWindow').show().offset(); > > > > //$.log("mWidth =" + mWidth); > > //$.log("mHeight =" + mHeight); > > imgPreloader.onload = function(){ > > imgPreloader.onload = null; > > var imageWidth = imgPreloader.width; > > var imageHeight = imgPreloader.height; > > var w = $(window).width() - 100; > > var h = $(window).height() - 100; > > $.log('screen width =' +w); > > $.log('screen height =' +h); > > if (imageWidth > w) { > > imageHeight = imageHeight * (w / imageWidth); > > imageWidth = w; > > if (imageHeight > h) { > > imageWidth = imageWidth * (h / imageHeight); > > imageHeight = h; > > } > > } > > else > > if (imageHeight > h) { > > imageWidth = imageWidth * (h / imageHeight); > > imageHeight = h; > > if (imageWidth > w) { > > imageHeight = imageHeight * (w / > > imageWidth); > > imageWidth = w; > > } > > } > > var mWinWidth = parseFloat(imageWidth + > > 30); > > var mWinHeight = parseFloat(imageHeight > > + 60); > > var mWinTop = parseFloat((h- > > imageHeight))/2; > > var mWinLeft = > > parseFloat((w-imageWidth))/2; > > $.log('mWinTop =' +mWinTop); > > $.log('mWinLeft =' + mWinLeft); > > $('.jqmWindow').css({ > > margin: 0, > > width: mWinWidth + 'px', > > height: mWinHeight+'px', > > top: mWinTop+'px', > > left: mWinLeft + 'px' > > }); > > > > > > $img = "<img id='TB_Image' src='" + this.src + "' > > width='" + imageWidth + "' height='" + imageHeight + "' alt=''/>"; > > $('#modalTitle').html(this.title); > > $('#modalContent').html($img); > > $('#modalWindow').jqmShow(); > > > > } > > imgPreloader.src = $(this).attr("href"); > > imgPreloader.title = $(this).attr("title"); > > > > return false; > > }); > > > > it's not that difficult after all: > > jquery core provides teh width() and height(), that's all you need. Dimension > is not needed > for this. > > you get the available screen space just like that: $(window).width() and > $(window).height() > > then basically, you create an image object > imgPreloader = new Image(); > and when that object is loaded, you check its size and compare it to the > window, then modify > the image size and the modal window size so that it nicely fits inside the > screen space. > that's what my code does at least... > > > > > Alexandre > >
