Thanks Eric, I will try out this code. Hmm, looking through it I can
sort of see what it's doing, but if you'd care to comment it up a bit
that would be awesome. Thanks for your help.


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;
> >         })
>
> > });

Reply via email to