Zoom 1 image in, 3 out.

Mr. Y · #1 (**permalink**) 07-15-2007, 03:54 PM

Hi, im totally new to this forum so please be kind. My english is not the best, so if there is some thing that i write you do not understand, please tell me.

A day or two back i was looking for inspiration on templatemonster and then i saw this gallery site, and thought wow. Normally i only use templatemonster for the design inspiration not the programming part, but this was an exeption. I found this design. It is only the 4 picutres on the front page I like.
The way they zoom in and out, when you point the cursor over one.
http://www.templatemonster.com/flash...tes/10151.html

Then i thought, this can be made in javascript (since im a flash hater). Then i thought, hmm i make it my self, but why not make a google search first, and then i found this script/site: Controlling image sizes using onmouseover

The script is by unitygizmo...and then i started reading the script through.

Normally when i work with javascript i give my images or whatever a Name, so they have different ID's. But this function can be used on every picutre.

In my mind i think.. if i have

HTML Code:

<img src='test1.jpg' id="P1" onMouseOver='resizeImg(this, 200)' onMouseOut='resizeImg(this)' width="250" height="250">
<img src='test2.jpg' id="P2" onMouseOver='resizeImg(this, 200)' onMouseOut='resizeImg(this)' width="250" height="250">
<br>
<img src='test3.jpg' id="P3" onMouseOver='resizeImg(this, 200)' onMouseOut='resizeImg(this)' width="250" height="250">
<img src='test4.jpg' id="p4" onMouseOver='resizeImg(this, 200)' onMouseOut='resizeImg(this)' width="250" height="250">

So when mouseover P1, P1 will zoom, and P2+P3+P4 will schrink, and when mouseover is on P2, P2 will zoom, and P1+P3+P4 will schrink.(do you get the system?)

But i do not have any idea how to make this, so i hope some of your guys have an idea or two

Leprakawn · #2 (**permalink**) 07-15-2007, 05:22 PM

Paging Mr. Deadeye... paging Mr. Deadeye. Do you read?

Deadeye · #3 (**permalink**) 07-15-2007, 09:40 PM

This one will take a little work, when I've got some time, I'll be posting here asap, I'd give me a day or 2 but we'll get ya fixed up

Wesley

Leprakawn · #4 (**permalink**) 07-16-2007, 01:13 AM

I looked at more in depth at that template page, and I really liked how the portfolio pictures are dynamic; you can click one and it resizes one way... click around a few times and click back on that one picture, and it has a different layout. That is pretty cool.

Mr. Y · #5 (**permalink**) 07-16-2007, 06:19 AM

Take the time that you need Deadeye. I look forward to hear from you.
If it's not too much to ask for, could you then tell me what you have done, so i prehaps can learn something.

Thanks

Deadeye · #6 (**permalink**) 07-16-2007, 11:56 AM

of course, I'll be posting here what I did and how it works

The concept is that you will need to change the height and the width of the image when the user clicks on it.

Do you want it to grow or just appear as a bigger image? There is not to much of a difference between the two, just a for or while loop (cant remember right now if javascript supports while loops) but I'll get a mock up setup for you.

Thanks for your patients btw

Wesley

Mr. Y · #7 (**permalink**) 07-16-2007, 01:11 PM

im looking forward to it.

I would look best if it could grow i think.

Deadeye · #8 (**permalink**) 07-18-2007, 11:49 AM

*EDIT*
AHHHH ok, I found I have a problem, it adjusts itself to 100% of the screen width and height, not the image height. This will at least get you started untill I can fix this problem.
*/EDIT*

ok, I got it mosty working now, the only thing it doesnt do is shrink other images, so the page can grow big.

Please see the comments in the code and if you are confused please let me know and I can exsplain em.

Anything in red is what you can change.

Code:

<html>
	<head>
		<style type="text/css">
		div.img1 {
			height:10%;
			width:10%;
		}
		div.img2 {
			height:10%;
			width:10%;
		}
		
		</style>
		<script type="text/javascript">
			
			function Grow(elementID)
			{
				var whPerc;  //Variable that holds the current height and width %
				var minSize = 10;  //Set this as the minimum size in % that you want the image i.e. "10" = 10%
				var state;  //Variable that holds wether the image is growing or shrinking at the time of the click
				
				//Find out if the image is small or full size
				if(document.getElementById(elementID).style.width == "" || document.getElementById(elementID).style.width == null || document.getElementById(elementID).style.width == "10%")
				{
					//Set the minimum size
					whPerc=minSize;
					state="Grow";
				}
				else
				{
					//Tells the script if the image is full size to shrink it back to the minSize
					whPerc= 100;
					state="Shrink";
				}
				
				//This starts the grow/shrink, Set the 2nd parameter in miliseconds on 
				//how fast or slow you want the image to grow to full size
				//i.e. a value of 10 will increase the size of 10% (step) every 10 miliseconds
				var interval= window.setInterval(scaleStep, 10);  
				return false;
					
				function scaleStep()
					{
						var div = document.getElementById(elementID);
						var step = 10;  //Sets the % that the image grows by everytime scaleStep is called.
						
						div.style.width = whPerc + "%";
						div.style.height = whPerc+ "%";
						if(document.getElementById("img1").style.width != "110%" && state=="Grow")
						{
							whPerc += step;
						}
						else if(document.getElementById("img1").style.width != "0%" && state=="Shrink")
						{
							whPerc -= step;
						}
						if(whPerc > 100 || whPerc < minSize)
						{
							window.clearInterval(interval);
							return true;
						}
						
					}
			}
				
		</script>
	</head>
	<body>
		<div id='img1' class='img1' onClick='Grow("img1");'>
			<img height='100%' width='100%' src='name.jpg' />
		</div>
		<div id='img2' class='img2' onClick='Grow("img2");'>
			<img height='100%' width='100%' src='name.jpg' />
		</div>
	</body>
</html>

You will need a surrounding div to make this work.

Everything in blue in the div/image block of code needs to be the same. This is because it uses the style sheet with the element name to gather a few parameters.

Code:

<div id='img1' class='img1' onClick='Grow("img1");'>
  <img height='100%' width='100%' src='name.jpg' />
</div>

You can also have th mouse over thing as well, but there is a qwerk that makes the image grow shrink if you invoke the mouse out (leave the image) while the image is growing, it will grow its max and min very rapidly as long as the mouse moves.

The code for this as follows. The blue still needs to have the same name though.

Code:

<div id='img1' class='img1' onMouseOver='Grow("img1");' onMouseOut='Grow("img1");'>
			<img height='100%' width='100%' src='name.jpg' />
		</div>

I hope this works for you

Wesley

Mr. Y · #9 (**permalink**) 07-18-2007, 12:53 PM

Im really grateful for what you have made. But the whole idea, is that when one of the four pictures grow the other three shrink.

It would be fantastic if you could, at sometime figure the shink function out.. I know that this is free work and that i no right to complain, that's why i kindly ask if you could help me.

Thanks in advance!

Deadeye · #10 (**permalink**) 07-18-2007, 12:55 PM

well, this is the first part of the script. As I have time to work on this script, I will add that functionality into it. But at least this can get you started.

Wesley

Mr. Y · #11 (**permalink**) 07-21-2007, 05:56 AM

thanks man i look forward to that. Is there something i can do for you?

Deadeye · #12 (**permalink**) 07-23-2007, 11:28 AM

No thanks, I'm good. I do this because I do like to help people, but right now my time is very limited, so this might take considerable time, maybe someone else here can help as well.

Wesley

Leprakawn · #13 (**permalink**) 07-23-2007, 09:28 PM

Deadeye, did you forget about your hitlist?

Deadeye · #14 (**permalink**) 07-24-2007, 10:18 AM

I dont know man, I've been so busy I've been forgetting about a lot of things

Leprakawn · #15 (**permalink**) 07-24-2007, 10:05 PM

I guess it is a good thing I sent you the PM about the original question here, and it looks like you have started him off fairly well. Here, have a sheep!