user4fun Posted November 13, 2007 Share Posted November 13, 2007 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 comment Share on other sites More sharing options...
Ingolme Posted November 13, 2007 Share Posted November 13, 2007 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 comment Share on other sites More sharing options...
user4fun Posted November 13, 2007 Author Share Posted November 13, 2007 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 comment Share on other sites More sharing options...
user4fun Posted November 14, 2007 Author Share Posted November 14, 2007 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 comment Share on other sites More sharing options...
justsomeguy Posted November 14, 2007 Share Posted November 14, 2007 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 comment Share on other sites More sharing options...
user4fun Posted November 16, 2007 Author Share Posted November 16, 2007 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 comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.