It is creating a DOM element (<img/>) and then binding a load event listener to it.
Read jQuery HowTo Resource - http://jquery-howto.blogspot.com On Sat, Jan 10, 2009 at 11:37 PM, nabrown78 <nabrow...@gmail.com> wrote: > > 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; >> > }) >> >> > });
