Super Simple?

jdeegz

08-09-2008, 12:25 AM

hey guys, first timer here =D

trying to add some javascript to my online portfolio.

so im trying to make a gallery, where you can cycle through my images.

I figured i could accomplish this by creating a string array (named img) and using onClick functions to update your location in the array.

Below is currently what i have come up with.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<script language='javascript' type="text/javascript">
var img = new Array("razor1.jpg", "razor2.jpg");
var desc = new Array("a", "b");
var picindex = 1;
function next(){
if(document.getElementById) {
document.getElementById('placeholder').src = img[picindex];
document.getElementById('d').innerHTML = desc[picindex];
picindex=picindex+1;
if(picindex==img.length){
picindex=0;
}
return false;
} else {
return true;
}
}

function prev(){
if(document.getElementById) {
document.getElementById('placeholder').src = img[picindex];
document.getElementById('d').innerHTML = desc[picindex];
picindex=picindex-1;
if(picindex==img.length){
picindex=0;
}
return false;
} else {
return true;
}
}

</script>

<link rel="stylesheet" href="deco.css" type="text/css" media="screen" />
</head>
<body>

<div id="container">

<div>
<img src="razor1.jpg" id="placeholder" alt="">
</div>

<div id="d">
a
</div>
<P><a href="#" onclick="next();" id="link">Next</a></p>
<P><a href="#" onclick="prev();" id="link">Back</a></p>

</div>

</body>
</html>

sorry if the code is too long!

You can view it in action over at my webpage.
Here (http://babel.massart.edu/~jdegruttola/images/id/razor/testthis.htm)

there is probably an easier way to do this entire project, if so, please enlighten me, but if this is going good here is my problem.

I want to be able to stop the onClick function once I reach the end of the array, or when I am at the beginning.(meaning, if i am at the end, the next button should not work)

Thank you in advance for your time!

ninnypants

08-09-2008, 12:34 AM

All you really need to do is disable the function once it reaches that point. Add this as the very first thin in next()

if(picindex == img.length){
return false;
}else{
//the rest of your code goes here
}

And this to prev()

if(picindex == 0){
return false;
}else{
//the rest of your code goes here
}

jdeegz

08-09-2008, 05:52 PM

hey, i tried this, but it still CHANGES the picindex number either + or - , but instead it just doesnt show the image, or says undefined.

so im thinking, is there a way to determine what the picindex is BEFORE the function happens, like

if the picindex == 0 return false, else RUN THE FUNCTION.

that would work right?

binaryWeapon

08-09-2008, 06:19 PM

Yes, if I'm not mistaken that's pretty much what he meant by //the rest of your code goes here

jdeegz

08-10-2008, 03:27 AM

http://babel.massart.edu/~jdegruttola/images/id/razor/testthis.htm

=\

still operates poorly..

more thinkin' me do!

ninnypants

08-10-2008, 04:11 AM

I made these changes to your functions:

if(picindex > img.length){
picindex = img.length;
return false;
}else{
//the rest of your code goes here
}

if(picindex < 0){
picindex = 0;
return false;
}else{
//the rest of your code goes here
}

I also modified both your functions

function next(){
++picindex
if(picindex>img.length){
picindex == img.length;
return false;
}
else
{
document.getElementById('placeholder').src = img[picindex];
document.getElementById('d').innerHTML = desc[picindex];
}
}

function prev(){
--picindex
if(picindex < 0){
picindex = 0;
return false;
}
else
{
document.getElementById('placeholder').src = img[picindex];
document.getElementById('d').innerHTML = desc[picindex];
}
}

jdeegz

08-10-2008, 04:35 AM

thank you very much for this, but!

when i click the next button to the end of the array, then click it once more to see if it stopped, it will display the last image in the array, then for a descript it will say 'undefined'

then it will sieze working!

=\

ive tried moving the ++picindex to different places, even erasing it, but to no avail.

auslin

08-11-2008, 10:45 PM

Hi,

It works with a couple of modifications to the code just above:

function next(){
++picindex;
if(picindex == img.length){
picindex = img.length - 1;

And just make sure the picindex variable is initiated to 0 (not 1) at the top of the script.