HELP with Javscript Interactive Slide Show?

Chinyere · Feb 25, 2005

Can someone help me with this?

Here is the scenario:

Outline

Company would like to show prospective clients their projects portfolio.

Two rows of small images of projects at the bottom of the page. When one small image is clicked, it activates a "slide show" at the top of the page. The slide show consists of a large image and accompanying text (that describes each project) by the side. (There could be three sets of images and text sets, for example, that will show and describe three different projects). The user viewing the web page will have a (scroll) control that will allow him/her to control the pace of the slideshow (that is, image and description sets will advance upon the user's click' user should also be allowed to go back and view previously viewed sets.)

Here is a possibility that I am mulling over:

http://www.dynamicdrive.com/dynamicindex14/interslide.htm

Does it sound right? If so, how should I customize it so that it does what I have described above?

OR

Should I forget this script and explore other options?

Any help would be greatly appreciated. I have a project due next week and I have hit the WALL with this one... Thanks.

Chinyere [afro2]

CliveC · Feb 25, 2005

Seems that that code could be modified.

Here is some simple code that could be easily modified if you would like to use it:

Code:

SLIDESHOW.HTM
head><title>My Slide-Show</title></head>
<frameset rows="*,60px" frameborder="0" border="0">
<frame src="text.htm#0001" name="TEXT"  scrolling="no" />
<frame src="menu.htm" scrolling="no" />
</frameset></html>

MENU.HTM
<html><head><style type="text/css">
.nav {color:black; background:navy; font-weight:bold;
      font-family: monospace; font-size:14px}
</style></head><body>
<script language="javascript">
var filename="text.htm#";
var numPages=    6
var counter=1;
var scount3="000";
var scount2="00";
var scount1="0";
var scount="";
function GoTop(){
  counter=1
  Go()
}
function GoPrev(){
  if (counter>1)
    counter--
  else
    return false
  Go()
}
function GoNext(){
  if (counter<numPages)
    counter++
  else
    return false
  Go()
}
function GoBott(){
  counter=numPages
  Go()
}
function Go(){
  scount=scount
  if (counter<1000) scount=scount1
  if (counter<100)  scount=scount2
  if (counter<10)   scount=scount3
  scount=scount+counter
  top.TEXT.location.replace(filename+scount)
}
</script>
<body class="nav" onKeyDown="GoNext()"><div align="center">
<input type="button" value="<<"  onClick="GoTop()"  />&nbsp;&nbsp;
<input type="button" value=" < " onClick="GoPrev()" />&nbsp;&nbsp;
<input type="button" value=" > " onClick="GoNext()" />&nbsp;&nbsp;
<input type="button" value=">>"  onClick="GoBott()" /></div>
</body></html>

TEXT.HTM
<html><head>
<style type="text/css">
hr   {color:blue}
body {color:black; background:white; 
      padding-left:2%; padding-right:2%;
      font-family: arial, sans-serif; font-size:medium}
.sp  {height:600px}
</style>
</head><body><div align="left">

<a name="0001"></a><h1>Regular Text</h1><hr />
<p>This is a sample slide-show giving examples of simple HTML techiques which may 

be employed to quickly produce a slide show for use on an overhead or for 

deployment on the web.</p>
<div class="sp"></div>

<a name="0002"></a><h1>Ordered List</h1><hr />
<ol><li>Item 1</li><li>Item 2</li></ol>
<div class="sp"></div>

<a name="0003"></a><h1>Unordered List</h1><hr />
<ul><li>Item 1</li><li>Item 2</li></ul>

<div class="sp"></div>
<a name="0004"></a><h1>Picture</h1><hr />
<img src="pic.gif" alt="picture" />

<div class="sp"></div>
<a name="0005"></a><h1>Format</h1><hr />
<p><b>This is bold</b></p><p><i>This is italic</i></p>
<p><u>This is underlined</u></p>

<div class="sp"></div>
<a name="0006"></a><h1>Table</h1><hr />
<table border="1">
<tr><th>col 1</th><th>col 2</th><th>col 3</th></tr>
<tr><td>1    </td><td>2    </td><td>3    </td></tr>
<tr><td>4    </td><td>5    </td><td>6    </td></tr>
</table><div class="sp"></div></div></body></html>

Clive

http://tubularity.com

http://PalliativeCareConsulting.org

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!

HELP with Javscript Interactive Slide Show?

Chinyere

Programmer

CliveC

Programmer

Similar threads

Part and Inventory Search

Sponsor