Ah, but my thumbnails are specially cropped versions of different
dimensions than the originals (rather than just simply smaller
versions of the large image).
That code actually seems to work (is the image being loaded into the
DOM when you set its source?), I'm just not sure why. You can see it
action on my test page:
http://www.kidsthinkbig.com/slideshows_test.htm
The top padding for the image correctly adjusts based on the image
height (check the source for the full javascript I'm using).
On Jan 8, 9:06 pm, brian <bally.z...@gmail.com> wrote:
> On Thu, Jan 8, 2009 at 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;
> > })
>
> > });
>
> We'll have to assume you have some object named, imagePreloader.
> ANyway, that code doesn't seem especially helpful, as it's not loading
> the image until the thumbnail is clicked.
>
> If you're going to load the large version in the same page, better to
> forget about thumbnails altogether, load your images, and reduce the
> size via CSS. Store the original dimensions in the jQuery data
> collection and retrieve it when the image's anchor is clicked. Then
> clone the image, though with the original dimension. This way, if
> you're doing something fancy like with a modal box, thickbox, or the
> like, you can animate its size change, then let the cloned image fade
> in.
>
> Or something like that.
