0

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
        },
       
      ];
3
Contributors
9
Replies
10
Views
8 Years
Discussion Span
Last Post by donfady
0

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?

0

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

0

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.

0

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.

0

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')
		}
}
0

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

0

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...)

Edited by Troy III: n/a

0

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

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.