Jump to content

Simple AJAX problem, I THINK


Recommended Posts

Sorry, I think this is the right forum.tell me if this would be complicated, I dont think it would be, but i need help.1 big box6 little boxesTable structure2 - 3 - 1 - 14 - 5 - 1 - 16 - 7 - 1 - 11 = the big box2 to 7 are the little boxeswhen you click on one of the little box images, the big box picture becomes the little box, and the original little box picture becomes the big box, Might be a trick for the caption switching with the image. If that is too complicated then maybe I would start without the captions.Just kind of swapping places.I am pretty sure i am USING AJAX, or maybe javascript but what if they have their Javascript turned off?I just don't have a clue where to start, I am not sending information to server nor am i expecting information.each image will have an id, or name or what ever so as with the caption, i am thing a <label> . and they just swap places and change image dimensions.Any help would be appreciated.

Link to post
Share on other sites

AJAX is based on Javascript. If javascript is turned off you can't do anything. Anyways, you won't need AJAX for something like this, just normal javascript.Here's a script I made up, you can change the styles of the divs if you like. And add your own images:

<html><head><script type="text/javascript">function imageSwap(id) {	tempSrc = new Image();	tempSrc.src = document.getElementById(id).src	document.getElementById(id).src = document.getElementById('main').src;	document.getElementById('main').src = tempSrc.src;	if(tempSrc.width > document.getElementById('main').parentNode.offsetWidth) {		document.getElementById('main').style.width = document.getElementById('main').parentNode.offsetWidth + "px";		document.getElementById('main').style.height = "auto";		if(document.getElementById('main').height > document.getElementById('main').parentNode.offsetHeight) {			arg1 = document.getElementById('main').width			arg2 = document.getElementById('main').height;			arg3 = parentNode.offsetHeight;			document.getElementById('main').style.height = document.getElementById('main').parentNode.offsetHeight;			document.getElementById('main').style.width = ((arg3 * arg1) / arg2) + "px";		}	} else if(tempSrc.height > document.getElementById('main').parentNode.offsetHeight) {		document.getElementById('main').style.height = document.getElementById('main').parentNode.offsetHeight + "px";		document.getElementById('main').style.width = "auto";	} else {		document.getElementById('main').style.width = tempSrc.width + "px";		document.getElementById('main').style.height = tempSrc.height + "px";	}}window.onload = setTimeout("imageSwap('main')", 10);</script><style type="text/css">.bigimage {position: absolute;right: 0px;width: 400px;}.littleimages {position: absolute;left: 0px;width: 400px;}.littleimages img {height: 64px;border: none;cursor: pointer;}</style></head><body><div style="width: 800px"><div class="bigimage"><img src="im0.jpg" alt="Image" id="main" /></div><div class="littleimages"><img src="im1.jpg" alt="image" id="im1" onclick="imageSwap('im1')" /><img src="im2.jpg" alt="image" id="im2" onclick="imageSwap('im2')" /><img src="im3.jpg" alt="image" id="im3" onclick="imageSwap('im3')" /><img src="im4.jpg" alt="image" id="im4" onclick="imageSwap('im4')" /></div></body></html>

Link to post
Share on other sites

waw, it is going to take be a little bit of time to figure this out out, lolThank you so much, it is a great jump start for my project.This is working great but the original mainiamge is large, once it swaps, it works fine but the new image is still small

Link to post
Share on other sites

I am an idiot, what i need to do is make the small boxes small images and the main window large, the image that i have now are all small and loook bad when i enlarge them.I guess i willjust make the pic large, and they naturally shrink on the side little box view.Thank you

Link to post
Share on other sites

It would probably be best to set up an array with the information for the images. You can have PHP create the Javascript array if the images are dynamic. The array could include links for the thumbnail, main image, and a caption. The function to swap will just set the src of the large image with the value in the array that it finds. It can search through the array looking for the thumbnail you clicked on, and replacing with the appropriate stuff.

<html>  <head>	<title>Image Swap</title>	<script type="text/javascript">	var imgs = new Array;		img = new Object;	img.thumb = "http://domain.com/images/thumb1.jpg"; //use the full paths	img.large = "http://domain.com/images/large1.jpg";	img.caption = "This is image 1";	imgs.push(img);		img = new Object;	img.thumb = "http://domain.com/images/thumb2.jpg";	img.large = "http://domain.com/images/large2.jpg";	img.caption = "This is image 2";	imgs.push(img);		img = new Object;	img.thumb = "http://domain.com/images/thumb3.jpg";	img.large = "http://domain.com/images/large3.jpg";	img.caption = "This is image 3";	imgs.push(img);		img = new Object;	img.thumb = "http://domain.com/images/thumb4.jpg";	img.large = "http://domain.com/images/large4.jpg";	img.caption = "This is image 4";	imgs.push(img);		img = new Object;	img.thumb = "http://domain.com/images/thumb5.jpg";	img.large = "http://domain.com/images/large5.jpg";	img.caption = "This is image 5";	imgs.push(img);		img = new Object;	img.thumb = "http://domain.com/images/thumb6.jpg";	img.large = "http://domain.com/images/large6.jpg";	img.caption = "This is image 6";	imgs.push(img);				function load_image(obj)	{	  for (var i = 0; i < imgs.length; i++)	  {		if (imgs[i].thumb == obj.src)		{		  document.getElementById("main_img").src = imgs[i].large;		  document.getElementById("caption").innerHTML = imgs[i].caption;		  break;		}	  }	}	</script>	<style type="text/css">	table { width: 500px; height: 500px; }	</style>  </head>  <body>	<table>	  <tr>		<td><img src="http://domain.com/images/thumb1.jpg" onclick="load_image(this)"></td>		<td><img src="http://domain.com/images/thumb2.jpg" onclick="load_image(this)"></td>		<td rowspan="3"><img id="main_img" src="http://domain.com/images/large1.jpg"><br><span id="caption">This is image 1</span></td>	  </tr>	  <tr>		<td><img src="http://domain.com/images/thumb3.jpg" onclick="load_image(this)"></td>		<td><img src="http://domain.com/images/thumb4.jpg" onclick="load_image(this)"></td>	  </tr>	  <tr>		<td><img src="http://domain.com/images/thumb5.jpg" onclick="load_image(this)"></td>		<td><img src="http://domain.com/images/thumb6.jpg" onclick="load_image(this)"></td>	  </tr>	</table>  </body></html>

That works as-is (you can see the caption change and right-clicking on the main image shows the correct src), but if you replace the URLs with valid image links you can see it for yourself. This won't do any resizing, so it will be best if all the thumbnails and large images are the same sizes respectively.

Link to post
Share on other sites

I have no idea how to thank both of you.Thank you very much. Just some guy, it is imporant for me for the image to be small when clicked on and it swaps with the large one. I will try to play with a bit, but thank you so much for the great code. I like it alot

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...