Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

"Previous - Current - Next" image script.

Status
Not open for further replies.
budapestnori

budapestnori

Technical User
Jan 15, 2004
33
HU
Ok, I hope I can convey my thoughts enough for someone to help me out.

I have a web page, which when loaded will query a database & load a recordset with the file names of various images. There will never be fewer than 1 images, but an unlimited number of total images. ( 1 to n ) I then have three divs with ID of zero, one, and two.

When the page is finished loading, the recordset will be transferred to a javascript array. Then, initially, Div "zero" (on the left) should contain the text "hello client"; Div "one" should contain the first element of the array (current); Div "two" should contain the second array element (next). When "next" is clicked, Div "zero" will get the array element in Div "One", and Div "One" will get the array element in Div "Two".

It is a simple process of displaying images, in a series, with a forward and backward button on the left and right of an enlarged image. I say simple on in that it probably is for somone who has mastered coding. I could probably do it ASP, but I am trying to learn Javascript.

Two issues in particular that challenge me is what if there is only 1 image, and what happens when the end of the array is reached. I'd like Div "Two" to say "thank you" when the last array element is displayed in Div "One".
 
Sort by date Sort by votes
budapestnori,

Here's an example of working through and array:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head><title>TEST</title>
<script language="JavaScript">
//assign global variable here which defines img array
//the info you'll be sending from .asp
var imgs = new Array("one.gif","two.gif","three.gif","four.gif");
var imgs_length = imgs.length;
var j = -1;
var dir = 1;
function ckImgs(){
j += dir;
objDiv = document.getElementById('imgsrc');
objDiv.innerHTML = imgs[j];
(j == imgs_length -1)? dir = chgBtn("  <<  ",-1): dir = dir;
(j == 0)? dir = chgBtn("  >>  ",1): dir = dir;
}
function chgBtn(arrow, num){
document.getElementById('Btn').value = arrow;
return num;
}
</script></head><body>
<div id="imgsrc">
Image source
</div>
<input id="Btn" type="button" value="  >>  " onClick="ckImgs()">
</body></html>

Here's a link to a script that might be pretty close:

Put together some code and shout back.

Great Javascript Resource:
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

AbidingDude
  • Locked
  • Question
Where Does The &quot;name&quot; Attribute Stand?
Replies
1
Views
122
gmmastros
gmmastros
MDGarcia
  • Locked
  • Question
Java script blocked due to MIME type error
Replies
2
Views
492
MDGarcia
MDGarcia
markronz
  • Locked
  • Question
Javascript to edit all script tags 1
Replies
2
Views
130
feherke
feherke
tonynsx
  • Locked
  • Question
document.getElementById(&quot;main&quot;).innerHTML not working
Replies
1
Views
110
ggriffit
ggriffit
waubain
  • Locked
  • Question
First image in slide gallery not showing - Uncaught TypeError: slides[(slideIndex - 1)] is undefined 1
Replies
2
Views
223
waubain
waubain

Part and Inventory Search

Sponsor

Back
Top