JavaScript / DHTML / AJAX RSS JavaScript / DHTML / AJAX RSS

Zoom in , enlarge effect

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Reply

•
•
Join Date: Nov 2008
Posts: 16
Reputation: Sereal_Killer is an unknown quantity at this point 
Solved Threads: 0
Sereal_Killer Sereal_Killer is offline Offline
Newbie Poster

Zoom in , enlarge effect

 
0
  #1
Sep 15th, 2009
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.

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1.  
  2. 	function createPage()
  3. 	{
  4. 		alert("vulpagina geactiveerd, j????");
  5. 		var maindiv =document.getElementById("maindiv")
  6. 		var maindiv2 = document.createElement("div")
  7. 		maindiv2.setAttribute("id","maindiv2")
  8.  
  9. 		maindiv.appendChild(maindiv2)
  10. 		imgload();
  11. 	}
  12.  
  13.  
  14. 	function imgload()
  15. 	{
  16.  
  17. 	for(i=1; i<26; i++)
  18. 		{
  19. 		addimg()
  20. 		}
  21. 	}
  22.  
  23. 	function addimg()
  24. 		{
  25. 		var maindiv=document.getElementById("maindiv");
  26. 		//alert('imgload called')
  27. 		var imgnr = i-1;
  28. 		var div=document.createElement("div");
  29. 		var img=document.createElement("img");
  30. 		var br=document.createElement("br");
  31.  
  32. 		img.src=album[imgnr].url;
  33. 		div.appendChild(img)
  34.  
  35.  
  36. 		div.setAttribute('style','float: left; width: 190px; height: 110px; margin: 10px; margin-left: 30px; text-align:center;');
  37. 		div.setAttribute("id","div" + i);
  38.  
  39. 		img.setAttribute('style','width: auto; height: 100%; border: solid 3px white;');
  40. 		img.setAttribute("id", "img" + i )
  41. 		img.setAttribute("display","inherit")		
  42.  
  43.  
  44.  
  45. 		img.setAttribute("display","inherit")
  46.  
  47.  
  48. 		img.addEventListener('click',zoomIn, false);
  49.  
  50. 		maindiv.appendChild(div);
  51. 		}
  52.  
  53.  
  54.  
  55.  
  56.  
  57. function zoomIn(e)
  58. {
  59.  
  60.  
  61. 		alert('zoominfc')
  62. 		var target = e.target;
  63. 		if (window.event) e = window.event;
  64. 		var srcElement = e.srcElement? e.srcElement : e.target;
  65. 		alert(srcElement.id)
  66. 		alert(srcElement.parentNode.id)
  67. 		target.style.display="none"	
  68. 		target.parentNode.style.display="none"	
  69. 		//removeallimages();
  70. 		maindiv = document.getElementById("maindiv")
  71. 		body = document.getElementsByTagName("body")
  72.  
  73. 		maindiv.parentNode.removeChild(maindiv)
  74.  
  75. 		//target.style.height = "500px"
  76. 		//target.parentNode.height = "500px"
  77.  
  78. }
  79.  
  80. function removeallimages()
  81. {
  82. 	div = document.getElementById("div1")
  83. 	img1 = document.getElementById("img1")
  84. 	alert('removeimgs')
  85. 	div1.removeChild(img1)
  86. 	div1.parentNode.removeChild(div1)	
  87. }
  88.  
  89.  
  90.     var album =
  91.       [
  92.         {
  93.           url: 'images/0006787.jpg',
  94.           landscape: false,
  95.           description: 'Shadows to the sea...',
  96.           photographer: 'Sander',
  97.           date: new Date('12-8-1999')
  98.         },
  99.         {
  100.           url: 'images/0004713.jpg',
  101.           landscape: false
  102.         },
  103.  
  104.       ];
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2008
Posts: 348
Reputation: Troy III will become famous soon enough Troy III will become famous soon enough 
Solved Threads: 42
Troy III's Avatar
Troy III Troy III is offline Offline
Posting Whiz

Re: Zoom in , enlarge effect

 
0
  #2
Sep 15th, 2009
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?
Reply With Quote Quick reply to this message  
•
•
Join Date: Nov 2008
Posts: 16
Reputation: Sereal_Killer is an unknown quantity at this point 
Solved Threads: 0
Sereal_Killer Sereal_Killer is offline Offline
Newbie Poster

Re: Zoom in , enlarge effect

 
0
  #3
Sep 15th, 2009
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
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2008
Posts: 348
Reputation: Troy III will become famous soon enough Troy III will become famous soon enough 
Solved Threads: 42
Troy III's Avatar
Troy III Troy III is offline Offline
Posting Whiz

Re: Zoom in , enlarge effect

 
0
  #4
Sep 15th, 2009
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:
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. function zoomIn(e)
  2. { 
  3.  		alert('zoominfc')
  4. 		var target = e.target;
  5. 	if (window.event) e = window.event;
  6. 		var srcElement = e.srcElement? e.srcElement : e.target;
  7. 		alert(srcElement.id)
  8. 		alert(srcElement.parentNode.id)
  9. 		target.style.display="none"
  10. 		target.parentNode.style.display="none"	
  11. 		//removeallimages();
  12. 		maindiv = document.getElementById("maindiv")
  13. 		body = document.getElementsByTagName("body")
  14.  		maindiv.parentNode.removeChild(maindiv)
  15.  		//target.style.height = "500px"
  16. 		//target.parentNode.height = "500px" 
  17. }
With:
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. function zoomIn(){	
  2. 	this.parentElement.style.display="none";
  3. 	document.body.removeChild(
  4. 		document.getElementById("maindiv") 
  5. 		);
  6. 	}

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:
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. function zoomIn(){	
  2. 	this.parentElement.style.display="none";
  3. 	document.body.removeChild(
  4. 		document.getElementById("maindiv") 
  5. 		);
  6. 	}
by replacing the: "img.addEventListener('click',zoomIn, false);"
with: "img.onclick= zoomIn;" in your "addimg()" function. Not to mention being cross-browser compatible too.
Reply With Quote Quick reply to this message  
•
•
Join Date: Nov 2008
Posts: 16
Reputation: Sereal_Killer is an unknown quantity at this point 
Solved Threads: 0
Sereal_Killer Sereal_Killer is offline Offline
Newbie Poster

Re: Zoom in , enlarge effect

 
0
  #5
Sep 16th, 2009
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.
Reply With Quote Quick reply to this message  
•
•
Join Date: Nov 2008
Posts: 16
Reputation: Sereal_Killer is an unknown quantity at this point 
Solved Threads: 0
Sereal_Killer Sereal_Killer is offline Offline
Newbie Poster

Re: Zoom in , enlarge effect

 
0
  #6
Sep 16th, 2009
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.

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. 		img.style.width ="auto";
  2. 		img.style.border ="solid 3px white";
  3. 		img.style.height="90%";
  4. 		img.setAttribute("id", "img" + i )
  5. 		img.setAttribute("display","inherit")		
  6. 		img.onclick= zoomcheck ;
  7.                 img.onclick= zoomin;
  8.                 img.onclick= zoomout;
  9. 		maindiv.appendChild(div);
  10. 		}
  11. function zoomcheck(e)
  12. {
  13.  zoomin(e);
  14. zoomout(e);
  15. }
  16.  
  17. function zoomin(e)
  18. {
  19. 		alert('zoomin func')
  20. 		var target = e.target;
  21. 		if (window.event) e = window.event;
  22. 		var srcElement = e.srcElement? e.srcElement : e.target;
  23. 		var maindiv = document.getElementById("maindiv")
  24. 		var divs = document.getElementsByTagName("div")
  25. 		var imgs = document.getElementsByTagName("img")	
  26. 		var imgnr = 0 ; 
  27. 		var divnr= 1
  28.  
  29. 		while(imgs[imgnr].id != target.id)
  30. 		{
  31. 			imgs[imgnr].style.display = "none"
  32. 			divs[divnr].style.display = "none"
  33. 			imgnr++
  34. 			divnr++
  35. 		}
  36. 		target.style.height="100%"	
  37. 		target.parentNode.style.height="100%"
  38. 		imgnr++
  39. 		divnr++
  40. 		while(imgs[imgnr].id != target.id)
  41. 		{
  42. 			imgs[imgnr].style.display = "none"
  43. 			divs[divnr].style.display = "none"
  44. 			imgnr++
  45. 			divnr++
  46. 		}
  47. }
  48.  
  49. function zoomout(e)
  50. {
  51. alert('zoomout func')
  52. 		if(target.parentNode.style.height=='100%')
  53. 		{
  54. 		alert('zoomOut')
  55. 		}
  56. 		else
  57. 		{
  58. 		alert('stay zoomed in')
  59. 		}
  60. }
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2008
Posts: 348
Reputation: Troy III will become famous soon enough Troy III will become famous soon enough 
Solved Threads: 42
Troy III's Avatar
Troy III Troy III is offline Offline
Posting Whiz

Re: Zoom in , enlarge effect

 
0
  #7
Sep 19th, 2009
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. #
  2. img.onclick= zoomin;
  3. #
  4. img.onclick= zoomout;

This is pure nonsense!
Reply With Quote Quick reply to this message  
•
•
Join Date: Sep 2009
Posts: 2
Reputation: donfady is an unknown quantity at this point 
Solved Threads: 0
donfady donfady is offline Offline
Newbie Poster

Re: Zoom in , enlarge effect

 
0
  #8
Sep 19th, 2009
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
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2008
Posts: 348
Reputation: Troy III will become famous soon enough Troy III will become famous soon enough 
Solved Threads: 42
Troy III's Avatar
Troy III Troy III is offline Offline
Posting Whiz

Re: Zoom in , enlarge effect

 
0
  #9
Sep 19th, 2009
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...)
Last edited by Troy III; Sep 19th, 2009 at 8:54 pm.
Reply With Quote Quick reply to this message  
•
•
Join Date: Sep 2009
Posts: 2
Reputation: donfady is an unknown quantity at this point 
Solved Threads: 0
donfady donfady is offline Offline
Newbie Poster

Re: Zoom in , enlarge effect

 
0
  #10
Sep 19th, 2009
•
•
•
•
Originally Posted by Troy III View Post
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
Reply With Quote Quick reply to this message  
Reply

Quick Reply to Thread
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Similar Threads
Other Threads in the JavaScript / DHTML / AJAX Forum
Thread Tools Search this Thread



ajax ajaxcode ajaxexample ajaxhelp ajaxjspservlets animate array automatically browser bug calendar captchaformproblem checkbox child class close codes cookies createrange() cursor date debugger dependent disablefirebug dom dropdown editor element embed engine events explorer ext file firefox form forms getselection google gxt hiddenvalue highlightedword hint html htmlform ie7 ie8 iframe images internet java javascript javascripthelp2020 jawascriptruntimeerror jquery jsf jsfile jsp jump libcurl maps masterpage math media microsoft object onmouseoutdivproblem onreadystatechange parent paypal pdf php player position post programming progressbar redirect regex runtime safari scriptlets scroll search security session shopping size software sql text textarea unicode variables web webservice website windowsxp wysiwyg \n
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC