Why is this function not working?

[benji_styler]

Hi,

Im having trouble implementing a function to display the first set of a series of images whithin my photo gallery.

the function is:

function firstlargeimage()

{
if (currentimage = 1){
document.images[5].src = images[currentimage]
document.images.FirstLarge.value = "FirstLarge"}
}

I know the current image should be set to = 0 as that is the first image in my "images" array. however when i do this it doesnt display the first image. When i set "current image = 1" in the above function it displays the second image and works fine.

Does any one know why this isnt working properly, its really getting on my nerves and preventing me from completing my assignment!

Many thanks Ben,

Below is my full script:

<script language="Javascript">

var currentthumb = 0
thumbnails = new Array ()
thumbnails[0] ="images/1small.jpg"
thumbnails[1] ="images/2small.jpg"
thumbnails[2] ="images/3small.jpg"
thumbnails[3] ="images/4small.jpg"
thumbnails[4] ="images/5small.jpg"
thumbnails[5] ="images/6small.jpg"
thumbnails[6] ="images/7small.jpg"
thumbnails[7] ="images/8small.jpg"
thumbnails[8] ="images/9small.jpg"
thumbnails[9] ="images/10small.jpg"
thumbnails[10] ="images/11small.jpg"
thumbnails[11] ="images/12small.jpg"
thumbnails[12] ="images/13small.jpg"
thumbnails[13] ="images/14small.jpg"
thumbnails[14] ="images/15small.jpg"
thumbnails[15] ="images/16small.jpg"
thumbnails[16] ="images/17small.jpg"
thumbnails[17] ="images/18small.jpg"
thumbnails[18] ="images/19small.jpg"
thumbnails[19] ="images/20small.jpg"

var currentimage
images = new Array ()
images[0] ="images/1large.jpg"
images[1] ="images/2large.jpg"
images[2] ="images/3large.jpg"
images[3] ="images/4large.jpg"
images[4] ="images/5large.jpg"
images[5] ="images/6large.jpg"
images[6] ="images/7large.jpg"
images[7] ="images/8large.jpg"
images[8] ="images/9large.jpg"
images[9] ="images/10large.jpg"
images[10] ="images/11large.jpg"
images[11] ="images/12large.jpg"
images[12] ="images/13large.jpg"
images[13] ="images/14large.jpg"
images[14] ="images/15large.jpg"
images[15] ="images/16large.jpg"
images[16] ="images/17large.jpg"
images[17] ="images/18large.jpg"
images[18] ="images/19large.jpg"
images[19] ="images/20large.jpg"

function nextthumb(){

if (currentthumb <=10){
currentthumb += 5
document.images[0].src = thumbnails[currentthumb]
document.images[1].src = thumbnails[currentthumb +1]
document.images[2].src = thumbnails[currentthumb +2]
document.images[3].src = thumbnails[currentthumb +3]
document.images[4].src = thumbnails[currentthumb +4]
document.images.next.value = "Next"}
}

function previousthumb(){

if (currentthumb >= 5){
currentthumb -= 5
document.images[0].src = thumbnails[currentthumb]
document.images[1].src = thumbnails[currentthumb +1]
document.images[2].src = thumbnails[currentthumb +2]
document.images[3].src = thumbnails[currentthumb +3]
document.images[4].src = thumbnails[currentthumb +4]
document.images.previous.value = "Previous"}
}

function changeDisplay(imageNo)

{

index = currentthumb + imageNo

document.images[5].src = images[index]
}

function nextlargeimage()

{

if (currentimage <=18){
currentimage += 1
document.images[5].src = images[currentimage]
document.images.NextLarge.value = "NextLarge"}
}

function previouslargeimage()

{

if (currentimage >=1){
currentimage -= 1
document.images[5].src = images[currentimage]
document.images.PreviousLarge.value = "PreviousLarge"}
}

function lastlargeimage()

{
if (currentimage = 19){
document.images[5].src = images[currentimage]
document.images.LastLarge.value = "LastLarge"}
}

function firstlargeimage()

{
if (currentimage = 1){
document.images[5].src = images[currentimage]
document.images.FirstLarge.value = "FirstLarge"}
}

</script>


<table width="950" border="0">
<tr>
<td width="49">
<div align="center">
<input type=button value="Previous" name="Previous" onClick="previousthumb();">
</div>
</td>
<td width="152">
<div align="center"><img src="../images/1small.jpg" name="img" border=1 onclick = changeDisplay(0)></div>
</td>
<td width="152">
<div align="center"><img src="../images/2small.jpg" name="img" border=1 onclick = changeDisplay(1)></div>
</td>
<td width="152">
<div align="center"><img src="../images/3small.jpg" name="img" border=1 onclick = changeDisplay(2)></div>
</td>
<td width="152">
<div align="center"><img src="../images/4small.jpg" name="img" border=1 onclick = changeDisplay(3)></div>
</td>
<td width="152">
<div align="center"><img src="../images/5small.jpg" name="img" border=1 onclick = changeDisplay(4)></div>
</td>
<td width="65">
<div align="center">
<input type=button value="Next" name="Next" onClick="nextthumb();">
</div>
</td>
</tr>
</table>
<table width="950" border="0">
<tr>
<td>&nbsp;</td>
</tr>
</table>

<table width="950" border="0">
<tr>
<td width="18" rowspan="2">
<div align="center"></div></td>
<td colspan="4"><img src="../images/1large.jpg" width="300" height="400"></td>
<td width="632" height="101">&nbsp;</td>
</tr>
<tr>
<td width="75"> <div align="center">
<input name="FirstLarge" type=button id="FirstLarge" onClick= "firstlargeimage();" value="First">
</div></td>
<td width="75"> <div align="center">
<input type=button value="Previous" name="PreviousLarge" onClick="previouslargeimage();">
</div></td>
<td width="75"> <div align="center">
<input type=button value="Next" name="NextLarge" onClick="nextlargeimage();">
</div></td>
<td width="75"> <div align="center">
<input name="LastLarge" type=button id="LastLarge" onClick= "lastlargeimage();" value="Last">
</div></td>
<td width="632" height="49">&nbsp;</td>
</tr>
</table>
</div>

[Kor]

Check whether your image is your first image of the document indeed... Maybe you have a banner, or a bullet. something...

[benji_styler]

The image im trying to change is the 5th image in the document. I have functions that sucessfully change it to next, previous and last images in my array. However when i implement my function to set it to the 1st image in my array images[0] as shown below:

function firstlargeimage()

{
if (currentimage = 0){
document.images[5].src = images[currentimage]
document.images.FirstLarge.value = "FirstLarge"}
}

The function doesnt appear to work as the image doesnt change to the first image in the array. If i change the function so that:

if(currentimage = 1)

then it works but display the 2nd image in my array(images[1]0. I cant understand why its not working for the first image??????????

[JPnyc]

= is the assignment operator. == is comparative.

[Kor]

1. var currentimage is not defined
2. comparative operator is ==, not =

[benji_styler]

i thought it was definde? where isnt it defined? should it be definde here:

var currentimage
images = new Array ()

In the brackets?

Sorry i am fairly new to javascript! Im just trying to fulfill my first assignment on javascript. Im not sure wqhat you mean about the comparison operators? whay does == need to be used instead of = ? I am very appriciative for your help,

Cheers, Ben.

[JPnyc]

Any if statement condition should have ==, rather than =. = just assigns a value, it cannot compare values.

[Kor]

hm... much too deprecated code... I need some time to bring it to a much up-to-date stade... maybe tommorow, if time, sorry

[benji_styler]

Sorry for being a pain guys :-( Iv written all my code from scrath, iv tried my best but it is my first assignment.

My aim was to create a javascript and html webpage which allows the user to browse a collection of images and their associated information to be viewed.

The requirments were:

1. show 5 thumbnail images.
2. show 1 large image
3. show info associated with large image being shown
4. provide a button to allow the user to select next 5 thumbnails
5. provide a button to allow the user to select previous 5 thumbnails
6. provide a button to show next large image in array
7. provide a button to show previous large image in array
8. Provide a button to allow user to show first large image in array
9. Provide a button to allow user to show last large image in array
10. provide a text box allowing user to enter number of large image to be shown.
11. allow thumbnails clicked to change large image being shown.

I am having problems with requirments 10, 8 and 3.

below is my code so far,

ANY help would be much appriciated!

Cheers Ben.

<html>
<head>
<script language="Javascript">

var currentthumb = 0
thumbnails = new Array ()
thumbnails[0] ="images/1small.jpg"
thumbnails[1] ="images/2small.jpg"
thumbnails[2] ="images/3small.jpg"
thumbnails[3] ="images/4small.jpg"
thumbnails[4] ="images/5small.jpg"
thumbnails[5] ="images/6small.jpg"
thumbnails[6] ="images/7small.jpg"
thumbnails[7] ="images/8small.jpg"
thumbnails[8] ="images/9small.jpg"
thumbnails[9] ="images/10small.jpg"
thumbnails[10] ="images/11small.jpg"
thumbnails[11] ="images/12small.jpg"
thumbnails[12] ="images/13small.jpg"
thumbnails[13] ="images/14small.jpg"
thumbnails[14] ="images/15small.jpg"
thumbnails[15] ="images/16small.jpg"
thumbnails[16] ="images/17small.jpg"
thumbnails[17] ="images/18small.jpg"
thumbnails[18] ="images/19small.jpg"
thumbnails[19] ="images/20small.jpg"

var currentimage
images = new Array ()
images[0] ="images/1large.jpg"
images[1] ="images/2large.jpg"
images[2] ="images/3large.jpg"
images[3] ="images/4large.jpg"
images[4] ="images/5large.jpg"
images[5] ="images/6large.jpg"
images[6] ="images/7large.jpg"
images[7] ="images/8large.jpg"
images[8] ="images/9large.jpg"
images[9] ="images/10large.jpg"
images[10] ="images/11large.jpg"
images[11] ="images/12large.jpg"
images[12] ="images/13large.jpg"
images[13] ="images/14large.jpg"
images[14] ="images/15large.jpg"
images[15] ="images/16large.jpg"
images[16] ="images/17large.jpg"
images[17] ="images/18large.jpg"
images[18] ="images/19large.jpg"
images[19] ="images/20large.jpg"

function nextthumb(){

if (currentthumb <=10){
currentthumb += 5
document.images[0].src = thumbnails[currentthumb]
document.images[1].src = thumbnails[currentthumb +1]
document.images[2].src = thumbnails[currentthumb +2]
document.images[3].src = thumbnails[currentthumb +3]
document.images[4].src = thumbnails[currentthumb +4]
document.images.next.value = "Next"}
}

function previousthumb(){

if (currentthumb >= 5){
currentthumb -= 5
document.images[0].src = thumbnails[currentthumb]
document.images[1].src = thumbnails[currentthumb +1]
document.images[2].src = thumbnails[currentthumb +2]
document.images[3].src = thumbnails[currentthumb +3]
document.images[4].src = thumbnails[currentthumb +4]
document.images.previous.value = "Previous"}
}

function changeDisplay(imageNo)

{

index = currentthumb + imageNo

document.images[5].src = images[index]
}

function nextlargeimage()

{

if (currentimage <=18){
currentimage += 1
document.images[5].src = images[currentimage]
document.images.NextLarge.value = "NextLarge"}
}

function previouslargeimage()

{

if (currentimage >=1){
currentimage -= 1
document.images[5].src = images[currentimage]
document.images.PreviousLarge.value = "PreviousLarge"}
}

function lastlargeimage()

{
if (currentimage = 19){
document.images[5].src = images[currentimage]
document.images.LastLarge.value = "LastLarge"}
}

function firstlargeimage()

{
if (currentimage = 1){
document.images[5].src = images[currentimage]
document.images.FirstLarge.value = "FirstLarge"}
}

</script>


<table width="950" border="0">
<tr>
<td width="49">
<div align="center">
<input type=button value="Previous" name="Previous" onClick="previousthumb();">
</div>
</td>
<td width="152">
<div align="center"><img src="../images/1small.jpg" name="img" border=1 onclick = changeDisplay(0)></div>
</td>
<td width="152">
<div align="center"><img src="../images/2small.jpg" name="img" border=1 onclick = changeDisplay(1)></div>
</td>
<td width="152">
<div align="center"><img src="../images/3small.jpg" name="img" border=1 onclick = changeDisplay(2)></div>
</td>
<td width="152">
<div align="center"><img src="../images/4small.jpg" name="img" border=1 onclick = changeDisplay(3)></div>
</td>
<td width="152">
<div align="center"><img src="../images/5small.jpg" name="img" border=1 onclick = changeDisplay(4)></div>
</td>
<td width="65">
<div align="center">
<input type=button value="Next" name="Next" onClick="nextthumb();">
</div>
</td>
</tr>
</table>
<table width="950" border="0">
<tr>
<td>&nbsp;</td>
</tr>
</table>

<table width="950" border="0">
<tr>
<td width="18" rowspan="2">
<div align="center"></div></td>
<td colspan="4"><img src="../images/1large.jpg" width="300" height="400"></td>
<td width="632" height="101">&nbsp;</td>
</tr>
<tr>
<td width="75"> <div align="center">
<input name="FirstLarge" type=button id="FirstLarge" onClick= "firstlargeimage();" value="First">
</div></td>
<td width="75"> <div align="center">
<input type=button value="Previous" name="PreviousLarge" onClick="previouslargeimage();">
</div></td>
<td width="75"> <div align="center">
<input type=button value="Next" name="NextLarge" onClick="nextlargeimage();">
</div></td>
<td width="75"> <div align="center">
<input name="LastLarge" type=button id="LastLarge" onClick= "lastlargeimage();" value="Last">
</div></td>
<td width="632" height="49">&nbsp;</td>
</tr>
</table>
</div>

</body>
</html>