gli Posted June 19, 2008 Share Posted June 19, 2008 I have three boxes (left) (MAIN) (right) and two buttons "previous" "next" when "previous" is pressed, then (MAIN) shows one picture previous, and (left) now shows one picture previous, and (right) shows one picture previous. But they all are synchronly (i dont now if a writed this word right), (MAIN) shows previous picture which was in (right) box. So shows previous pic before (MAIN) but shows next picture after (MAIN) , but there can to press previous button or next to look picture in (MAIN) box, and so (left) and (right) changes too. I made a code but then i looked that it will not be for me. Because my javascript array where are listed the pics, will be not static, there will be maybe 4 pics or 6 or 9 etc. I tried to explain what i want and there is my code, i have done the (MAIN) box thing, but problem is for (left) and (right) so i didn't do with them nothing. Sorry for my bad English... JavaScript code: window.onload = initLinks; var myPix = new Array("images/one.gif","images/two.gif","images/three.gif"); var thisPic = 0; function initLinks() { document.getElementById("prevLink").onclick = processPrevious; document.getElementById("nextLink").onclick = processNext; } function processPrevious() { if (thisPic == 0) { thisPic = myPix.length; } thisPic--; // this controls main pic to show one pic previous document.getElementById("myPicture").src = myPix[thisPic]; // PROBLEM // this controls left pic to show one pic previous but one pic before main pic too document.getElementById("myPicture2").src = myPix[thisPic]; // PROBLEM // this controls right pic to show one pic previous but one pic after main pic too document.getElementById("myPicture3").src = myPix[thisPic]; return false; } function processNext() { thisPic++; if (thisPic == myPix.length) { thisPic = 0; } // this controls main pic to show one pic next in the main box document.getElementById("myPicture").src = myPix[thisPic]; // PROBLEM // this controls pic to show one pic next, but one pic before pic which is in main box document.getElementById("myPicture2").src = myPix[thisPic]; // PROBLEM // this controls pic to show one pic next, but one pic after pic which is in main box document.getElementById("myPicture3").src = myPix[thisPic]; return false; } html: <html> <head> <title>Image Slideshow</title> <script type="text/javascript" src="script.js"></script> <link rel="stylesheet" rev="stylesheet" href="styles.css" /> </head> <body> <div align="center"> <h1>MAIN</h1> <img src="images/one.gif" id="myPicture" width="201" height="155" alt="Slideshow" /> <h2><a href="previous.html" id="prevLink">« Previous</a> <a href="next.html" id="nextLink">Next »</a></h2> </div> <div align="left"> <h1>LEFT</h1> <img src="images/two.gif" id="myPicture2" width="201" height="155" alt="Slideshow" /> </div> <div align="right"> <h1>RIGHT</h1> <img src="images/three.gif" id="myPicture3" width="201" height="155" alt="Slideshow" /> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
lemmin Posted June 19, 2008 Share Posted June 19, 2008 I think this is what you are trying to do. You would probably want to dynamically set the image sources at the start instead of how I have it hardcoded, but you get the idea. I didn't really test it, so you might have to tweak some stuff. <script language="Javascript"> var myPix = new Array("img1.gif","img2.gif","img3.gif","img4.gif","img5.gif"); function goRight() { myPix.push(myPix.shift()); imgLeft.src = myPix[0]; imgMid.src = myPix[1]; imgRight.src = myPix[2]; } function goLeft() { myPix.unshift(myPix.pop()); imgLeft.src = myPix[0]; imgMid.src = myPix[1]; imgRight.src = myPix[2]; } </script> <img id="imgLeft" src="img1.jpg" onClick="goLeft()"> <img id="imgMid" src="img2.jpg"> <img id="imgRight" src="img3.jpg" onClick="goRight()"> Quote Link to comment Share on other sites More sharing options...
gli Posted June 19, 2008 Author Share Posted June 19, 2008 Oh big thanks Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.