---------- 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
