Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 299
  • Last Modified:

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>
0
ki11switch
Asked:
ki11switch
  • 2
  • 2
1 Solution
 
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
 
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

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now