Slick image resizing 2

[BG12424]

Is there a direction someone can point me in that will get me started on replicating similar functionality with javascript/dhtml as seen with this gallery/portfolio section of

http://www.rsteenphoto.com.

You can see what I mean when you click on any one of the thumbnail images on the right side of the page. I like how I can see the border dynamically adjust its height & width in preparation for the next image.

Thanks a ton!

regards,
Brian

http://www.gainesconsulting.com

The problem with doing something right the first time is that nobody appreciates how difficult it was.

 

[mwolf00]

That site is done using Flash...

Programming today is a race between software engineers striving to build better and bigger idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning. - Rick Cook

Tsuna​

 

[BG12424]

Thank you, I understand that, so are you saying that it can't be done in any other language?

I want to simulate ONLY the resizing of the graphics with dhtml/javascript as on that site and wondering if anyone has ideas. Thanks

regards,
Brian

http://www.gainesconsulting.com

The problem with doing something right the first time is that nobody appreciates how difficult it was.

 

[mwolf00]

You could probably simulate it. Store the height and width with the thumbnail and display the IMG in a SPAN with borders. Gradually resize the SPAN when the user clicks on the thumbnail and then display the IMG when the resizing is done...

Programming today is a race between software engineers striving to build better and bigger idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning. - Rick Cook

Tsuna​

 

[BG12424]

I'm wondering how I would go about the gradual resizing part. I grasp the idea behind the gradual resizing, but would I use the setTimeout control on this or what do you think would be best. Thanks mWolf

regards,
Brian

http://www.gainesconsulting.com

The problem with doing something right the first time is that nobody appreciates how difficult it was.

 

[trollacious]

Here's a page that uses a picture that's expanded and contracted with Javascript code doing the work. Is this the kind of thing you're looking for?

http://patsstats.com/listings.asp

Lee

 

[mwolf00]

Yes, settimeout would be the way to go here....






Programming today is a race between software engineers striving to build better and bigger idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning. - Rick Cook

Tsuna​

 

[BG12424]

Lee,

Thanks for the link. The visual affects I'm trying to simulate is when the image border is a gradual resize opposed to an instant resize. I want the user to see the image resizing taking place.

regards,
Brian

http://www.gainesconsulting.com

The problem with doing something right the first time is that nobody appreciates how difficult it was.

 

[trollacious]

So set the resize increment smaller and the setInterval shorter.

Lee

 

[mwolf00]

<script>
	stepWidth = 0
	stepHeight = 0
	numSteps = 10
	loopsRun = 0
	curHeight = 300
	curWidth = 500

	function resizer(newHeight, newWidth){
		theSpan = document.getElementById("imgSpan")

		if (stepWidth == 0) {
			stepWidth = (curWidth - newWidth) / numSteps
			stepHeight = (curHeight - newHeight) / numSteps
		}
		
		cWidth = stepWidth 
		cHeigth = stepHeight
		
		theSpan.style.height = curHeight - stepHeight
		theSpan.style.width = curWidth - stepWidth
		
		if (loopsRun < 10){
			started = setTimeout("resizer(" + newHeight + "," + newWidth + ")", 100)
			loopsRun ++
			curHeight = curHeight - stepHeight
			curWidth = curWidth - stepWidth
		}
		else if (loopsRun == 10){
			clearTimeout(started)
			loopsRun = 0
			stepWidth = 0
			stepHeight = 0
			theSpan.style.height = newHeight
			theSpan.style.width = newWidth
			curHeight = newHeight
			curWidth = newWidth
		}
	}
</script>

<div id="imgSpan" style="width:500; height: 300; border: solid blue 3px;">The span<div>

<input type=button onclick="resizer(100,200)" value="100 x 200">
<input type=button onclick="resizer(300,500)" value="300 x 500">

Programming today is a race between software engineers striving to build better and bigger idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning. - Rick Cook

Tsuna​

 

[BG12424]

Thank you, I will have a look.

regards,
Brian

http://www.gainesconsulting.com

The problem with doing something right the first time is that nobody appreciates how difficult it was.

 

[BG12424]

Thanks mwolf, I really appreciate the code snippet; although you didn't have to go that far. Yes, this is what I was looking for.

regards,
Brian

http://www.gainesconsulting.com

The problem with doing something right the first time is that nobody appreciates how difficult it was.