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.
