More specifically, I don't understand these couple of lines: img = $('<img/>').load(function(){ var pld = $(this), imgHeight = pld.height();
On Jan 9, 12:43 pm, Eric Garside <gars...@gmail.com> wrote: > Try this function out: > > $(function(){ > var largeimg = $('#largeImg img'); > $('.thumbs a').each(function(){ > var jQ = $(this), > path = jQ.attr('href'), > alt = jQ.attr('title') || '', > img = $('<img/>').load(function(){ > var pld = $(this), imgHeight = pld.height(); > jQ.click(function(){ > largeimg > .css({ > height: /* Do whatever you need to do here to > fix your padding. Image height stored in local variable "imgHeight" */ > }) > .attr({src: path, title: alt}); > }); > }); > img.attr('src', path); > }); > > }); > > It *should* preload your images, and set up the correct onclick events > to set the #largeImg img.src to the proper path > > - Hide quoted text - > > On Jan 8, 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; > > }) > > > });