Open Random Image using Javascript with Ability to Cycle Through Them

Okay, here is my problem: I want to open a random image (got that part), but I also want to have Previous and Next links that will cycle through the array.  I don't want it just to open up the next image, i want it to go to a html page with the next image, so it would be possible to go forward/back from there as well.  When it gets to the last image in the array, I want the next button to cycle back to the first.

Here is my code:

<html>
<body>
<script type="text/javascript">

pic = new Array
pic[1] = "1.jpg"
pic[2] = "2.jpg"
pic[3] = "3.jpg"
pic[4] = "4.jpg"
pic[5] = "5.jpg"

var totalpics = (pic.length -1)
var totalpicsdec = (pic.length -2)
var random_num = (Math.round((Math.random()*totalpicsdec)+1))
var random_numinc = random_num + 1
var random_numdec = random_num - 1

if (random_num == totalpics) {
random_numinc = 1
}

if (random_num == 1) {
random_numdec = totalpics
}

function showpic() {
document.write("<body bgcolor=000000><font face=arial color=white>")
document.write("<img src=" + pic[random_num] + ">" + "<br><br>")
document.write("<b>current:</b> " + pic[random_num] + "<br>")
document.write("<b>previous:</b> " + pic[random_numdec] + "<br>")
document.write("<b>next:</b> " + pic[random_numinc] + "<br>")
document.write("<b>total pics:</b> " + totalpics)
document.write("<br><br><a href=javascript:prevpic()>Previous</a> - ")
document.write("<a href=test.html>Reload</a> - ")
document.write("<a href=javascript:nextpic()>Next</a>")
document.write("</font></body>")
}

</script>
<body onLoad=showpic()>

</body>
</html>
ki11switchAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

AlbertoFrogCommented:
Dear Mr Switch,

Here's one solution. There has to be a way of communicating between pages, and this uses the query string from the URL. Alternatively you could use a hidden frame, which is neater in some ways, but it means having more than one HTML page. I could post that as well if you like.

A couple of tips (if that's alright):
Always start your arrays from 0, not 1. It only makes life more complicated in the long run if you don't.

It often doesn't matter, but try and get into the habit of not forgetting the semicolons at the end of a line.

Alberto


<html>
<body>
<script type="text/javascript">

//Shortcut for creating an array
pic = ["1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg"];
var totalpics = pic.length;

//Get the URL of this page
queryVar = this.location.href;

//Is there a query string?
var inq = queryVar.indexOf('?');

//If a query string is found, take the value of that for the value of the picture to be shown
if(inq>=0)
     id = Number(queryVar.substring(inq + 1));
else
     id = (Math.round(Math.random()*totalpics));

//Use the modulus operator to loop the array
var next = (id + 1) % totalpics;

//Add totalpics to ensure we don't go negative when modulusing
var prev = (id - 1 + totalpics) % totalpics;

function showpic() {
     document.write("<body bgcolor=black><font face=arial color=white>");
     document.write("<img src=" + pic[id] + ">" + "<br><br>");
     document.write("<b>current:</b> " + pic[id] + "<br>");
     document.write("<b>previous:</b> " + pic[prev] + "<br>");
     document.write("<b>next:</b> " + pic[next] + "<br>");
     document.write("<b>total pics:</b> " + totalpics);
     document.write("<br><br><a href=test.html?"+prev +">Previous</a> - ");
     
     //Don't set a query string for the reload so a random picture is loaded
     //If you want to show the same picture again, use
     //document.write("<a href=test.html?"+id+">Reload</a>");
     document.write("<a href=test.html>Reload</a> - ");
     
     document.write("<a href=test.html?"+next +">Next</a>");
     document.write("</font></body>");
}

</script>
<body onLoad=showpic()>

</body>
</html>
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
ki11switchAuthor Commented:
Thank you Alberto, that works perfect.  So I can add items to the array, and it will automatically go next/forward through them correctly?

Thanks Again,
-killswitch
0
ki11switchAuthor Commented:
Okay, disregard that last question.  I figured it out.  Also, for some reason when u do the math.random thing u need to have a var which is equal to pic.length - 1 or it will sometimes try to load a pic higher than what is in the array.  Anyway, thanks again.  I'm plotting all kinds of ways I can use this script... muahahaha... :)

-killswitch
0
AlbertoFrogCommented:
Use Math.floor instead of Math.round. You shouldn't need to subtract 1 then.

round will round halves up, but floor will always drop to the lowest integer. The opposite of floor is, remarkably, ceil.

Alberto
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.