J
Jason Ferguson
I'm banging my head against the wall, wondering why the following code
doesn't work for me.
In short, I create a javascript object called Imagebrowser, define the
methods, etc, etc. "picture1" is created as a new instance of
Imagebrowser (using "var picture1=new Imagebrowser(imagearray,
name);"). When I try to use it on my onClick methods of my <a> tags,
it errors saying "picture1 is null or not an object".
Code is below:
<html>
<head>
<title>Test Page</title>
<script type="text/javascript">
<--
// ImgBrowser 0.1
// Written by Jason Ferguson
// Copyright 2004
//
// Licensing Info
//
// Use it however you want, at your peril, not mine.
//
// Class Documentation
//
// ImgBrowser is a javascript class for displaying and browsing images
(i.e. for thumbnails)
//
// imagearray must be in the following format:
//
// (<img src>,<img src>,etc)
//
// The class will rip apart this array into two internal arrays: one
for the images, and one
// for the captions. Once the internal arrays are created, a third
array is created consisting of Image
// objects instead of the text "source" objects, which will also
preload the images.
//
// The images in the collection can be browsed via the shownext and
showprev method calls.
//
//
// define some methods to be included in Rectangle object
// Constructor function for ImageBrowser class
function Imagebrowser(imagearray, name)
{
this.imagearray=imagearray;
this.imagename=name; // store the name of the image from the
document (DOM stuff)
this.pointer=0;
this.length=imagearray.length;
this.shownext=shownext;
this.showprev=showprev;
this.setdefaultimage=setdefaultimage;
this.createImgArray=createImgArray;
this.getpointer=getpointer;
}
function createImgArray(imagearray)
{
// Create an empty array that will eventually hold all of the Image
objects
temparray= new Array();
// Skip through the "even" indexes, starting with 0 (I know, 0 isn't
// technically even). i represents the index for the newly created
array,
// j represents the index for the passed array with image locations
and text
i=0;
j=0;
while (j < imagearray.length)
{
temparray = new Image();
temparray.src = imagearray[j];
i+=1;
j+=2;
}
return temparray;
}
// This function takes the source (as a string) of a default image and
returns a default image, preloading
// it in the process. It is recommended that this be a relatively
small image so that loading
// is quick
function setDefaultImage(defaultimage)
{
temp = new Image();
temp.src = defaultimage;
return temp;
}
// This function moves the pointer to the next Image object, then
changes the image
function shownext()
{
if (this.pointer == this.size - 1)
{
this.pointer = 0;
}
else
{
this.pointer += 1;
}
document.images[this.name] = this.imgobjarray[this.pointer];
}
// This function moves this pointer to the previous Image object, then
changes the image
function showprev()
{
if (this.pointer == 0)
{
this.pointer = this.size - 1;
}
document.images[this.name] = this.imgobjarray[this.pointer];
}
function getpointer()
{
return this.pointer;
}
-->
</script>
</head>
<body>
<script type="text/javascript">
<!--
array1 = new Array("image1.gif","image2.gif","image3.gif"); // Doesnt
need global scope!
var picture1 = new Imagebrowser(array1, "image1");
-->
</script>
<img src="image1.gif" name="image1" />
<a href="#" onclick="picture1.shownext()">Next</a> <br />
<a href="#" onclick="picture1.showprev()">Previous</a> <br />
</body>
</html>
doesn't work for me.
In short, I create a javascript object called Imagebrowser, define the
methods, etc, etc. "picture1" is created as a new instance of
Imagebrowser (using "var picture1=new Imagebrowser(imagearray,
name);"). When I try to use it on my onClick methods of my <a> tags,
it errors saying "picture1 is null or not an object".
Code is below:
<html>
<head>
<title>Test Page</title>
<script type="text/javascript">
<--
// ImgBrowser 0.1
// Written by Jason Ferguson
// Copyright 2004
//
// Licensing Info
//
// Use it however you want, at your peril, not mine.
//
// Class Documentation
//
// ImgBrowser is a javascript class for displaying and browsing images
(i.e. for thumbnails)
//
// imagearray must be in the following format:
//
// (<img src>,<img src>,etc)
//
// The class will rip apart this array into two internal arrays: one
for the images, and one
// for the captions. Once the internal arrays are created, a third
array is created consisting of Image
// objects instead of the text "source" objects, which will also
preload the images.
//
// The images in the collection can be browsed via the shownext and
showprev method calls.
//
//
// define some methods to be included in Rectangle object
// Constructor function for ImageBrowser class
function Imagebrowser(imagearray, name)
{
this.imagearray=imagearray;
this.imagename=name; // store the name of the image from the
document (DOM stuff)
this.pointer=0;
this.length=imagearray.length;
this.shownext=shownext;
this.showprev=showprev;
this.setdefaultimage=setdefaultimage;
this.createImgArray=createImgArray;
this.getpointer=getpointer;
}
function createImgArray(imagearray)
{
// Create an empty array that will eventually hold all of the Image
objects
temparray= new Array();
// Skip through the "even" indexes, starting with 0 (I know, 0 isn't
// technically even). i represents the index for the newly created
array,
// j represents the index for the passed array with image locations
and text
i=0;
j=0;
while (j < imagearray.length)
{
temparray = new Image();
temparray.src = imagearray[j];
i+=1;
j+=2;
}
return temparray;
}
// This function takes the source (as a string) of a default image and
returns a default image, preloading
// it in the process. It is recommended that this be a relatively
small image so that loading
// is quick
function setDefaultImage(defaultimage)
{
temp = new Image();
temp.src = defaultimage;
return temp;
}
// This function moves the pointer to the next Image object, then
changes the image
function shownext()
{
if (this.pointer == this.size - 1)
{
this.pointer = 0;
}
else
{
this.pointer += 1;
}
document.images[this.name] = this.imgobjarray[this.pointer];
}
// This function moves this pointer to the previous Image object, then
changes the image
function showprev()
{
if (this.pointer == 0)
{
this.pointer = this.size - 1;
}
document.images[this.name] = this.imgobjarray[this.pointer];
}
function getpointer()
{
return this.pointer;
}
-->
</script>
</head>
<body>
<script type="text/javascript">
<!--
array1 = new Array("image1.gif","image2.gif","image3.gif"); // Doesnt
need global scope!
var picture1 = new Imagebrowser(array1, "image1");
-->
</script>
<img src="image1.gif" name="image1" />
<a href="#" onclick="picture1.shownext()">Next</a> <br />
<a href="#" onclick="picture1.showprev()">Previous</a> <br />
</body>
</html>