The Praetorian Posted May 16, 2007 Share Posted May 16, 2007 I'm still new the javascript (just in the first few chapters of the book I bought), and I already found something I want to use it for. I'm designing a web page for someone who has a lot of images on each page, and I figured a cool way to display them would be to have a single image load, and a down at the top or bottom of the image have <next><previous> buttons. I can guess how to do this, but I still need some info.I know what I'd used to swap the src of the image element, but how do I tell the javascript which image to use next? Again, my guess would be to insert all the images into an array, and tell the script to cycle through the array. That's where I'm lost. What's the syntax for something like that? I'm not asking anyone to write the script for me (unless they want to) just need someone to point me in the right direction. Thanks guys. Link to comment Share on other sites More sharing options...
Lulzim Posted May 16, 2007 Share Posted May 16, 2007 something like this? <html><head> <script type='text/javascript'> var start = 0; var names = new Array ("Signs01.gif", "Signs02.gif", "Signs03.gif", "Signs04.gif", "Signs05.gif"); function next() { if (start<names.length) document.getElementById("pic").src = names[++start]; } function previous() { if (start!=0) document.getElementById("pic").src = names[--start]; } </script></head><body onload="document.getElementById('pic').src=names[0];"><div align='center'> <img id='pic'> <br> <a href='java script:previous();'>previous</a> | <a href='java script:next();'>next</a></div></body></html> don't forget to correct the links at java script:next() and java script:previous(), write them without spacesI don't know why this text editor does this thing :S Link to comment Share on other sites More sharing options...
The Praetorian Posted May 16, 2007 Author Share Posted May 16, 2007 Thanks! That works great. Link to comment Share on other sites More sharing options...
jesh Posted May 16, 2007 Share Posted May 16, 2007 I believe you want the code that sets the image to look more like this: document.getElementById("pic").src = names[start++]; and document.getElementById("pic").src = names[start--]; ++start executes the incrementer before getting the item out of the names array. So, if the first time you call it, start = 0, then you'll get names[1]. Then, when start = 4, start < names.length will still test true and you'll attempt to get names[5] which doesn't exist in your array.start++ will execute the incrementer after getting the item out of the names array. So, if the first time you call it, start = 1, then you'll get names[1] and then start will increase to 2.Other than that, looks great. Link to comment Share on other sites More sharing options...
Lulzim Posted May 16, 2007 Share Posted May 16, 2007 yes, you're right.thanks for the correction :)Can you imagine working all night long and writing this at 6 in the morning it could be worse Link to comment Share on other sites More sharing options...
jesh Posted May 16, 2007 Share Posted May 16, 2007 I'm worried that my version is slightly wrong because I wrote it before my first cup of coffee! Link to comment Share on other sites More sharing options...
The Praetorian Posted May 16, 2007 Author Share Posted May 16, 2007 Yea. I think there's something wrong with it. The code actually worked fine before, but now when I try to switch between, the first time I hit <next> nothing happens, and then it switches to the next image. After switching to the second image, hitting <previous> actually takes me to the third image... Here's the code again. <html><head> <script type='text/javascript'> var start = 0; var names = new Array ("004.gif","Aquarius.gif","Aries.gif"); function next() { if (start<names.length) document.getElementById("pic").src = names[start++]; } function previous() { if (start!=0) document.getElementById("pic").src = names[start--]; } </script></head><body onload="document.getElementById('pic').src=names[0];"><div align='center'> <a href='java script:previous();'>Previous</a> | <a href='java script:next();'>Next</a> <br /> <img id="pic" /></div></body></html> Link to comment Share on other sites More sharing options...
jesh Posted May 16, 2007 Share Posted May 16, 2007 Hmm, now that I've had some coffee, Lulzim's approach seems better. The constraints just needed to be tweaked a bit: var currentIndex = 0;var names = new Array ("004.gif","Aquarius.gif","Aries.gif");function next(){ if(currentIndex < (names.length - 1)) { document.getElementById("pic").src = names[++currentIndex]; }}function previous(){ if(currentIndex > 0) { document.getElementById("pic").src = names[--currentIndex]; }} Link to comment Share on other sites More sharing options...
The Praetorian Posted May 16, 2007 Author Share Posted May 16, 2007 ah yes, that works much better. I had actually started to notice another problem with the previous script. If you hit next again after reaching the last picture, then you had to hit previous twice to get to the previous one. Very odd. But this new script works perfectly. Thanks guys. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.