471,086 Members | 934 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,086 software developers and data experts.

Help to Modify Script

I really like this javascript for an image slideshow. 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?

Header....

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
NewImg = new Array (
"http://pic1.jpeg"
,"http://pic2.jpeg"
,"http://pic3.jpeg"
,"http://pic4.jpeg"
);
var ImgNum = 0;
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;
}
document.slideshow.src = NewImg[ImgNum];
}
}
function auto() {
if (lock == true) {
lock = false;
window.clearInterval(run);
}
else if (lock == false) {
lock = true;
run = setInterval("chgImg(1)", delay);
}
}
// End -->
</script>
in body....

<img src="pic1.jpeg" name="slideshow">
<table>
<tr>
<td align="right"><a href="javascript:chgImg(-1)">Previous</a></td>
<td align="center"><a href="javascript:auto()">Auto/Stop</a></td>
<td align="left"><a href="javascript:chgImg(1)">Next</a></td>
</tr>
</table>
Jul 23 '05 #1
1 1398
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.
Jul 23 '05 #2

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

2 posts views Thread by Jackson Yap | last post: by
4 posts views Thread by Adrienne | last post: by
3 posts views Thread by Tim::.. | last post: by
7 posts views Thread by Novice Computer User | last post: by
2 posts views Thread by Benjamin Rutt | last post: by
36 posts views Thread by aljamala | last post: by
1 post views Thread by alibaaba | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.