Member Avatar for kevwood

hi i have been following a tutorial on how to build a image viewer using javascript for a web page i am building for my shop. i have not been able to get it to work and i have looked at the comments at the bottom and it seems to work for everyone else. the code could be old i have had to fix one or two things with it being outdated.

this is simply a test for the real thing and have built a html test page and put it on a free hosting site which is

Click Here

here is the code for the html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>image viewer test page</title>
<script type="text/javascript" src="image.js"></script>
</head>

<body>
<img name="slideImg" src="images/01.jpg" width="800" />
<a href="#" onCLick="switchImage('slideImg')">play</a>
<a href="#" onCLick="clearTimeout(timerID)">pause</a>
<a href="#" onClick="switchImage('slideImg'); clearTimeout(tmierID)">next</a>
</body>
</html>

here is the javascript code file name image.js

var interval = 1500;
var random_display = 0;
var imageDir = "images/";
var imageNum = 0;
var totalImages = imageArray.length;

imageArray = new Array();

imageArray[imageNum++] = new imageItem(imageDir + "01.jpg");
imageArray[imageNum++] = new imageItem(imageDir + "02.jpg");
imageArray[imageNum++] = new imageItem(imageDir + "03.jpg");
imageArray[imageNum++] = new imageItem(imageDir + "04.jpg");

function imageItem(image_location) {

    this.image_item = new image();
    this.image_item.src = image_location;
}

function get_ImageItemLocation(imageObj) {

    return(imageObj.image_item.src);
}

function randNum(x, y) {

    var range = y - x + 1;
    return Math.floor(Math.random() * range) + x;
}

function getNextImage() {

    if (random_display) {
        imageNum = randNum(0, totalImages-1);
    }
    else {
        imageNum = (imageNum+1) % totalImages;
    }

    var new_image = get_ImageItemLocation(imageArray[imageNum]);
    return (new_image);
}

function getPrevImage() {

    imageNum = (imageNum-1) % totalImages;
    var new_image = get_ImageItemLocation(imageArray[imageNum]);
    return(new_image);
}

function pervImage(place) {
    var new_image = getPrevImage();
    document[place].src = new_image;
}

function switchImage(place) {
    var new_image = getNextImage();
    document[place].src = new_image;
    var recur_call = "switchImage('"+place+"')";
    timerID = setTimeout(recur_call, interval);
}

any help with this would be good or a pointer to a tutorial that works would be good. once i have the test one working i will then change the code to work how i will need it to

  • 3 Contributors
  • 6 Replies
  • 282 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by kevwood
Member Avatar for urtrivedi

First of all you must stop directory browsing (this is not related to your problem, its just security measure).

Now I can see test2.html, test.html and default.php.

Which one you are working on whose code you given above.

your server also adding javascript code for analytics, which is giving error in the bottom of page.

Member Avatar for kevwood

thanks for the reply the server where it is held was just free hosting to test the code on it is not the server where it will be held once i have th complete site built.

test and test2 are basically the same page one has the javascript in the head section the other is linking to the javascript held on an different page. i done this simply to try an get it to work which it still didnt. the code above is what i have ended up with after following a tuttorial online i just want to get this working so i can then see how things work and build one that is more suited to my needs.

Member Avatar for LesF

Maybe add an id attribute to slideImg, not sure of document[place] is going to locate an element by the name attribute. eg:
<img id="slideImg" name="slideImg" src="images/01.jpg" width="800" />

[edit] sorry, ignore that. The name attribute is ok.
Tho there is a spelling error on your 'next' link; clearTimeout(tmierID)

Edited by LesF because: Wrong answer
Member Avatar for LesF

Does your browser have developer tools or let you see the javascript console? On chrome the console lists various errors when your page loads;

Uncaught ReferenceError: imageArray is not defined 
Uncaught TypeError: Cannot read property 'image_item' of undefined

It looks like imageArray is not declared with var.
Your function imageItem might need some changes to make it return the expected object type

Member Avatar for kevwood

fixed it was a typo which ie really annoying the code where the typo was is as follows

wrong code

function imageItem(image_location) {

    this.image_item = new image();
    this.image_item.src = image_location;
}

correct code

function imageItem(image_location) {

    this.image_item = new Image();
    this.image_item.src = image_location;
}

you will notice the capital I on image in the correct code.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.