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