Open Random Image using Javascript with Ability to Cycle Through Them

Posted on 2003-03-18
Medium Priority
Last Modified: 2012-06-27
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:

<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>")

<body onLoad=showpic()>

Question by:ki11switch
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2

Accepted Solution

AlbertoFrog earned 300 total points
ID: 8164656
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.


<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
     id = Number(queryVar.substring(inq + 1));
     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>");

<body onLoad=showpic()>


Author Comment

ID: 8168042
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,

Author Comment

ID: 8168210
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... :)


Expert Comment

ID: 8170909
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.


Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

752 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question