scorpion53061 wrote:
I really like this javascript for an image slideshow.
No, you don't want that. It is badly written and error-prone.
The only thing I woudl like to do differently is have
a cell above the image and navigation that
would allow text content to be placed.
Does anyone have an idea of how that might be acomplished?
Make your array an array of objects, then use the
usual DOM methods to change the text node's value
according to the current object's property value.
Header....
<SCRIPT LANGUAGE="JavaScript">
<script type="text/javascript">
<!-- Begin
Nonsense, ask Google Groups.
NewImg = new Array (
The call operator should not be separated by whitespace from the
called function/method; this should be reserved for other operators
and operands.
"http://pic1.jpeg"
,"http://pic2.jpeg"
,"http://pic3.jpeg"
,"http://pic4.jpeg"
);
Why, are relative URIs not good enough?
var ImgNum = 0;
Only constructor identifiers should start uppercase.
var ImgLength = NewImg.length - 1;
//Time delay between Slides in milliseconds
var delay = 3000;
var lock = false;
var run;
function chgImg(direction) {
if (document.images) {
ImgNum = ImgNum + direction;
if (ImgNum > ImgLength) {
ImgNum = 0;
}
if (ImgNum < 0) {
ImgNum = ImgLength;
}
Hardly legible.
document.slideshow.src = NewImg[ImgNum];
This is proprietary referencing. As "slideshow" is the name
of an "img" element, use the document.images collection as
of DOM Level 2 and below:
document.images['slideshow'].src = ...;
}
}
function auto() {
if (lock == true) {
If `lock' is of type "boolean", no further comparison is required:
if (lock)
But you want to avoid globals.
lock = false;
window.clearInterval(run);
}
else if (lock == false) {
if (!lock)
But since you invert the value of lock every time, it
would be much easier to write
lock = !lock;
if (!lock)
{
// if lock *was* true
}
else
{
// if lock *was* false
}
and since `lock' only reflects `run' converted to boolean,
`run' can serve as condition here, making the following
clearInterval() call more reliable and `lock' unnecessary.
// End -->
Nonsense.
</script>
in body....
<img src="pic1.jpeg" name="slideshow">
<table>
<tr>
<td align="right"><a href="javascript:chgImg(-1)">Previous</a></td>
"javascript:" is nonsense here, see the FAQ. And you do not want to
use links that only work with JavaScript. Even if you do, write them
dynamically so that users without scripting do not encounter those
"malfunctioning" links.
<td align="center"><a href="javascript:auto()">Auto/Stop</a></td>
<td align="left"><a href="javascript:chgImg(1)">Next</a></td>
</tr>
</table>
And do not use tables solely for layout purposes.
This said, a better (yet suboptimal as e.g. not working
without client-side scripting) way for doing this is this
untested quick-hack:
<head>
...
<script type="text/javascript">
var aImg = new Array(
{url: "http://pic1.jpeg",
descr: "pic1"},
{url: "http://pic2.jpeg",
descr: "pic2"},
{url: "http://pic3.jpeg",
descr: "pic3"},
{url: "http://pic4.jpeg",
descr: "pic4"});
var num = 0;
function chgImg(direction)
{
var imgs;
if ((imgs = document.images))
{
num += direction;
var maxIdx;
if (num > (maxIdx = aImg.length))
{
num = 0;
}
else if (num < 0)
{
num = maxIdx;
}
var curImg = aImg[num];
imgs['slideshow'].src = curImg.url;
switch (domLevel)
{
case 3: // newer Mozilla/5.0, among others
descr.textContent = curImg.descr;
break;
case 2: // older Mozilla/5.0, among others
descr.firstChild.nodeValue = curImg.descr;
break;
case 0: // IE4, among others
descr.innerHTML = curImg.descr;
break;
case -1: // NN4
d.open("text/html");
d.write(curImg.descr);
d.close();
}
}
return false;
}
var run;
function auto(delay)
{
if (run)
{
window.clearInterval(run);
}
else
{
// setInterval() will not work everywhere;
// consider to setTimeout() a method
// that setTimeout()s itself instead
run = setInterval("chgImg(1)", delay);
}
return false;
}
</script>
...
</head>
<body>
<div><img src="pic1.jpeg" alt="..." name="slideshow"><br>
<span id="descr" style="position:relative; top:0"></span></div>
<script type="text/javascript">
// DOM feature detection
var descr;
if (document.getElementById) // DOM Levels 2 & 3
{
descr = document.getElementById("descr");
}
else if (document.all) // IE4 DOM
{
descr = document.all("descr");
}
else if (document.layers) // NN4 DOM
{
descr = document.layers[0];
}
var domLevel = -2, d;
if (descr)
{
if (typeof descr.textContent != "undefined")
{
domLevel = 3;
}
else if (typeof descr.firstChild
&& typeof descr.firstChild.nodeValue != "undefined")
{
domLevel = 2;
}
else if (typeof descr.innerHTML != "undefined")
{
domLevel = 0;
}
// omit this if you do not want to support NN4 anymore
else if ((d = descr.document)
&& d.open
&& d.write
&& d.close)
{
domLevel = -1;
}
}
document.write(
'<div style="text-align:center">'
+ '<a href="#" onclick="return chgImg(-1);">Previous<\/a>'
+ ' <a href="#" onclick="return auto(3000);">Auto/Stop<\/a>'
+ ' <a href="#" onclick="return chgImg(1);">Next<\/a><\/div>');
</script>
HTH
PointedEars
P.S.
Your From address is invalid which violates Netiquette and
Internet/Usenet standards. Change it to avoid to be killfiled.
