hi . im trying to figure out what the best possible way would be for me to zoom into a selected img/div.

i have multiple divs with images in them and when a user clicks on one of them i would want the selected image to fill the whole screen.

it doesnt have to have the animation zoom in effect.

i was thinking of 2 ways of doing this.
i thought about using the url from the selected img and clearing the whole page and basicly re-create it with only one div and img inside of it with the url as source. but i havent been able to do this.

second i was thinking of maybe using the element's cooridnates and just using that of a way of determining how far it should be streched to fit in the window.

i havent had any luck with either and any help would be welcomed. ill post the code below

there are various things in there that i am trying out or doing wrong, any advice is always apreciated.
ps. not alowed to use any libraries it has to be js written from scratch.

function createPage()
	{
		alert("vulpagina geactiveerd, j????");
		var maindiv =document.getElementById("maindiv")
		var maindiv2 = document.createElement("div")
		maindiv2.setAttribute("id","maindiv2")
		
		maindiv.appendChild(maindiv2)
		imgload();
	}
		
				
	function imgload()
	{
	
	for(i=1; i<26; i++)
		{
		addimg()
		}
	}
	
	function addimg()
		{
		var maindiv=document.getElementById("maindiv");
		//alert('imgload called')
		var imgnr = i-1;
		var div=document.createElement("div");
		var img=document.createElement("img");
		var br=document.createElement("br");
		
		img.src=album[imgnr].url;
		div.appendChild(img)
 
		
		div.setAttribute('style','float: left; width: 190px; height: 110px; margin: 10px; margin-left: 30px; text-align:center;');
		div.setAttribute("id","div" + i);

		img.setAttribute('style','width: auto; height: 100%; border: solid 3px white;');
		img.setAttribute("id", "img" + i )
		img.setAttribute("display","inherit")		
		
		
	
		img.setAttribute("display","inherit")

			
		img.addEventListener('click',zoomIn, false);

		maindiv.appendChild(div);
		}
	
	



function zoomIn(e)
{


		alert('zoominfc')
		var target = e.target;
		if (window.event) e = window.event;
		var srcElement = e.srcElement? e.srcElement : e.target;
		alert(srcElement.id)
		alert(srcElement.parentNode.id)
		target.style.display="none"	
		target.parentNode.style.display="none"	
		//removeallimages();
		maindiv = document.getElementById("maindiv")
		body = document.getElementsByTagName("body")
	
		maindiv.parentNode.removeChild(maindiv)
		
		//target.style.height = "500px"
		//target.parentNode.height = "500px"

}

function removeallimages()
{
	div = document.getElementById("div1")
	img1 = document.getElementById("img1")
	alert('removeimgs')
	div1.removeChild(img1)
	div1.parentNode.removeChild(div1)	
}


    var album =
      [
        {
          url: 'images/0006787.jpg',
          landscape: false,
          description: 'Shadows to the sea...',
          photographer: 'Sander',
          date: new Date('12-8-1999')
        },
        {
          url: 'images/0004713.jpg',
          landscape: false
        },
       
      ];

Recommended Answers

Answered by Troy III 272 in a post from

What do you need exctly?
1. Zoom to its native size; or 2. stretch it out to maximum available width/hight; 3. or stretch it by percetage zoom to 100% 200% 300% etc?

Jump to Post
Answered by Troy III 272 in a post from

First of: the code that you are using is not a cross-browser one!
Seccond: This code doesn't zoom anything at all!
(I allready told you - but you don't listen) -
Replace:

"img.addEventListener('click',zoomIn, false);"
//  with:
		img.onclick= zoomIn;

And the following:

function zoomIn(e)
{ 
 		alert('zoominfc')
		var …
Jump to Post
Answered by Troy III 272 in a post from
#
img.onclick= zoomin;
#
img.onclick= zoomout;

This is pure nonsense!

Jump to Post

All 9 Replies

What do you need exctly?
1. Zoom to its native size; or 2. stretch it out to maximum available width/hight; 3. or stretch it by percetage zoom to 100% 200% 300% etc?

i kinda got it working but what im lookiing for is basicly fit it to the window so stretch it to window width/height

ill be beack tomorow cause it midnite here

First of: the code that you are using is not a cross-browser one!
Seccond: This code doesn't zoom anything at all!
(I allready told you - but you don't listen) -
Replace:

"img.addEventListener('click',zoomIn, false);"
//  with:
		img.onclick= zoomIn;

And the following:

function zoomIn(e)
{ 
 		alert('zoominfc')
		var target = e.target;
	if (window.event) e = window.event;
		var srcElement = e.srcElement? e.srcElement : e.target;
		alert(srcElement.id)
		alert(srcElement.parentNode.id)
		target.style.display="none"
		target.parentNode.style.display="none"	
		//removeallimages();
		maindiv = document.getElementById("maindiv")
		body = document.getElementsByTagName("body")
 		maindiv.parentNode.removeChild(maindiv)
 		//target.style.height = "500px"
		//target.parentNode.height = "500px" 
}

With:

function zoomIn(){	
	this.parentElement.style.display="none";
	document.body.removeChild(
		document.getElementById("maindiv") 
		);
	}

Now, - what your "zoomIn()" function does, is:

  1. target.style.display="none"
  2. target.parentNode.style.display="none"

meaning:

  1. make disappear the image.
  2. make disapear its parent too.

Than with your last line:

  • "maindiv.parentNode.removeChild(maindiv)

you are removing [deleting] the main div containing all children div/img elements!
Theres' nothing being "zoomed" so far!
But, as i said - all of that can be replaced with this simple code:

function zoomIn(){	
	this.parentElement.style.display="none";
	document.body.removeChild(
		document.getElementById("maindiv") 
		);
	}

by replacing the: "img.addEventListener('click',zoomIn, false);"
with: "img.onclick= zoomIn;" in your "addimg()" function. Not to mention being cross-browser compatible too.

ive got school soon.
i didnt realize you changed the even listener to that sorry.
i do know i have to change all the set attributes .

i know the current code doesnt zoom in i was trying to implement it but i didnt have a clue how to get it started but i made new code that does that.
but i have a new problem with it wich ill post later.

really sorry that i didnt see you changed the event listener.
il change all of that in my code b4 i post again.

this is the code i have now.
it does the zoom in function.
i cant get this.id to work for some reason so im still using target.id

can i call up 2 functions with one on click event?
cause with the addevent listener i was able to call both of them but with img.onclick i cant get 2 functions to fire.

my next problem is i dont know how to go about getting the other imgs back.

i set them to display = none
but i dont know if removing them and then re-creating the site is a better way to go fo zooming back out.

second problem/question is that there should be a better way to implement the zoom as i have made it with 2 while functions cause i couldnt figure out how to make it work with if or for function.

img.style.width ="auto";
		img.style.border ="solid 3px white";
		img.style.height="90%";
		img.setAttribute("id", "img" + i )
		img.setAttribute("display","inherit")		
		img.onclick= zoomcheck ;
                img.onclick= zoomin;
                img.onclick= zoomout;
		maindiv.appendChild(div);
		}
function zoomcheck(e)
{
 zoomin(e);
zoomout(e);
}

function zoomin(e)
{
		alert('zoomin func')
		var target = e.target;
		if (window.event) e = window.event;
		var srcElement = e.srcElement? e.srcElement : e.target;
		var maindiv = document.getElementById("maindiv")
		var divs = document.getElementsByTagName("div")
		var imgs = document.getElementsByTagName("img")	
		var imgnr = 0 ; 
		var divnr= 1
		
		while(imgs[imgnr].id != target.id)
		{
			imgs[imgnr].style.display = "none"
			divs[divnr].style.display = "none"
			imgnr++
			divnr++
		}
		target.style.height="100%"	
		target.parentNode.style.height="100%"
		imgnr++
		divnr++
		while(imgs[imgnr].id != target.id)
		{
			imgs[imgnr].style.display = "none"
			divs[divnr].style.display = "none"
			imgnr++
			divnr++
		}
}

function zoomout(e)
{
alert('zoomout func')
		if(target.parentNode.style.height=='100%')
		{
		alert('zoomOut')
		}
		else
		{
		alert('stay zoomed in')
		}
}
#
img.onclick= zoomin;
#
img.onclick= zoomout;

This is pure nonsense!

I really love web programming and i want to be a wizard to..can anyone be my teach ..so we can all be proud of each other
..I will be waiting for your guide.
Peace

In fact, I've been waiting for somebody like you,
who can come and teach me some insanity
like that.
I would be very proud of you!
-What is the outcome of a function that will try to zoom you in and out within the same click?!!
(...please...)

In fact, I've been waiting for somebody like you,
who can come and teach me some insanity
like that.
I would be very proud of you!
-What is the outcome of a function that will try to zoom you in and out within the same click?!!
(...please...)

I just want to start learning it and i dont know anything about it..so whatever questions you asked now will be useless all i want is to be a student and you will be my teacher
THANKS

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, learning, and sharing knowledge.