Pics and thumbs on same page with pics of varying sizes

12 Posts

bhop Reply #1, 18 years, 3 months ago

Hello,

I’m using the pics and thumbs on same page layout from the wiki. My gallery contains pics of different sizes. I’ve run into an issue where when a thumb is clicked, the currently displayed large picture will resize to the dimensions of the image whose thumbnail was just clicked. When the next picture finally loads, it will look fine, but while the pic is loading, the current pic is all stretched or squashed (depending on the dimensions of the currently loading pic). If the images happen to be the same size, there’s really no problem. Also, once the images are loaded into the cache, this behavior is barely noticeable. However, on the first load of each image, it looks kinda bad, and since I have a bunch of differently sized images, the issue comes up regularly.

I’m not too hot with the javascript (or really anything, frankly) :’(
I looked into pre-loading images with JS, but that seems to deal more with JS within the head tags.

Is there anyway that I can make the current image not resize to the dimensions of the next image, before it is completely loaded?

Thanks (sorry, I’m trying undecided

),

bhop

EDIT:
I ended up incorporating jQuery, which allowed me to apply transitions between images, making changing between pics look much better.

4,213 Posts

doze Reply #2, 18 years, 2 months ago

Quote from: bhop at Jun 26, 2008, 11:26 AM

EDIT:
I ended up incorporating jQuery, which allowed me to apply transitions between images, making changing between pics look much better.

That’s a very good option.. You can also "hide" the picture while it’s loading by changing the src attribute of the image tag to some transparent one pixel gif image for example.

"He can have a lollipop any time he wants to. That's what it means to be a programmer."

6 Posts

princesswatson Reply #3, 18 years, 1 month ago

Hi,

I’m having the same issue with my gallery, and I am happy that a solution is available. However, I was wondering if either one of you would be able to elaborate on the solution you found because I’m not sure how to go about implementing them.

Any help you could give would be much appreciated.

Thanks!

Princesswatson

4,213 Posts

doze Reply #4, 18 years, 1 month ago

I haven’t tried it myself, but you should first include jQuery js library to your template and then replace the showPic js function with something like this:

function showPic(url,title,descr,width,height) {
        $("#maxImage").fadeOut("fast", function(){
        	$("#maxImage").attr({
			src: url,
			width: width,
			height: height
		});
        	$(this).fadeIn("fast");
	});
	$("#maxTitle").html(title);
	$("#maxDescr").html(descr);
}

Should do it..

"He can have a lollipop any time he wants to. That's what it means to be a programmer."

6 Posts

princesswatson Reply #5, 18 years, 1 month ago

You rock! That works. Thanks so much. It works perfectly on FF, so hopefully I can get it running a lil smoother on IE. Either way, at least it helps. I was actually wondering about the method you had suggested as well, because I don’t have to have the images fade. Where would you change the src of the image tag to "hide" the image? I tried playing around with it with no success.

Thanks again!

4,213 Posts

doze Reply #6, 18 years, 1 month ago

First you need a 1px (or larger) transparent gif picture somewhere.

Then try something like this:

function showPic(url,title,descr,width,height) {
	$("#maxImage").attr({
		src: 'http://www.yoursite.com/path/to/small/transparent/image.gif',
		width: width,
		height: height
	});
	$("#maxImage").attr({
		src: url,
		width: width,
		height: height
	});
	$("#maxTitle").html(title);
	$("#maxDescr").html(descr);
}

So basically it first sets the image to a transparent image with a right size and then changes that to the actual image. You can put the fade in to that process aswell, if you want.

"He can have a lollipop any time he wants to. That's what it means to be a programmer."

6 Posts

princesswatson Reply #7, 18 years, 1 month ago

That worked as well. Thanks again for your help!