On Thu, Jan 8, 2009 at 6:06 PM, nabrown78 <nabrow...@gmail.com> wrote: > > Hi All, > I am building a simple little gallery where you click on a thumbnail, > and a larger image displays on the same page. I was trying to adjust > the padding around the large image using the new image's dimensions. I > pieced together this image preloading code (see below), but I don't > fully understand it (is it just loading the new image into the DOM to > be able to access its dimensions?) and I don't know if it's the best > way to go about it. > > Many thanks for any advice, > Nora Brown > > $(document).ready(function(){ > > $(".thumbs a").click(function(){ > > var largePath = $(this).attr("href"); > var largeAlt = $(this).attr("title"); > > // Image preload process > var imagePreloader = new Image(); > imagePreloader.src = largePath; > imagePreloader.onload = function() { > alert(imagePreloader.height); > }; > > $("#largeImg img").attr({ src: largePath, alt: largeAlt }); > return false; > }) > > }); >
We'll have to assume you have some object named, imagePreloader. ANyway, that code doesn't seem especially helpful, as it's not loading the image until the thumbnail is clicked. If you're going to load the large version in the same page, better to forget about thumbnails altogether, load your images, and reduce the size via CSS. Store the original dimensions in the jQuery data collection and retrieve it when the image's anchor is clicked. Then clone the image, though with the original dimension. This way, if you're doing something fancy like with a modal box, thickbox, or the like, you can animate its size change, then let the cloned image fade in. Or something like that.