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