Captions for Javascript slideshow

C

CB US 77

I use a piece of javascript to create a photo gallery slideshow. The
slideshow part works great, but I would like to add captions to each
picture. If you want to see the html, send me an email to
(e-mail address removed).

Any help would be great.
 
B

Bob Wightman

I use a piece of javascript to create a photo gallery slideshow. The
slideshow part works great, but I would like to add captions to each
picture. If you want to see the html, send me an email to
(e-mail address removed).

On my site I use the following for slide shows:

Each slideshow page has an array of pictures and an array of
associated captions defined. Within the page body I have the
following:

<div id="column3">
<h2>Title</h2>
<div id="picRange">
</div>
<div id="navigation" align="center">
</div>
<div align="center">
<img src=pictures[0] name="PictureBox" >
</div>
<div id="CaptionBox">
</div>
</div>

In my Javascript I have:

document.getElementById("picRange").innerHTML= "Picture " + (curPic +
1) + " of " + captions.length;

document.getElementById("CaptionBox").innerHTML= captions[curPic];

Explanation:

The <div id="column3"> is a CSS layout directive.
The <div id="picRange"> is for a string "Picture 1 of 10" or similar.
The <div id="navigation" align="center"> is a CSS layout placeholder
for a list of links to the photos. Like [1] [2] [3] ....
The <div id="CaptionBox"> is a holder for the caption. I could have
used DOM to do the text creation but went for innerHTML - it works in
IE, Opera and Firebird/Firefox.

See http://www.aqvi55.dsl.pipex.com/climb/eiger_slide.htm for how this
looks.

HTH

Bob
 
T

Thomas 'PointedEars' Lahn

Bob said:
(e-mail address removed) (CB US 77) wrote in message news:<[email protected]>...

Please do not write attribution novels. Duplicating header information
serves no greater purpose but only distracts readers. The name(s) of
the previous poster(s) is sufficient to follow the discussion.
On my site I use the following for slide shows:

Each slideshow page has an array of pictures and an array of
associated captions defined. Within the page body I have the
following:

<div id="column3">
<h2>Title</h2>
<div id="picRange">
</div>
<div id="navigation" align="center">
</div>
<div align="center">
<img src=pictures[0] name="PictureBox" >
^^^^^^^^^^^
Attribute values must be quoted if they contain the "[" or the "]"
character. As this is not the only exception, they should be quoted
always (HTML 4.01). URIs must not contain the "[" or the "]" character
as they belong to the "unwise" characters. If a resource name contains
those characters, they require to be escaped in its URI (RFC 2396).

But I do not assume that you wanted to refer to a resource named
"pictures[0]" here but to the "src" property of the Image object
that is the first element of the `pictures' array you have not
posted. If so, your code is really utter nonsense.
ECMAScript/J(ava)Script variable values cannot be referred to
this way, they require to be dynamically written like

document.write(
'<img src="' + pictures[0].src + '" name="PictureBox">');

which would introduce a dependency on client-side scripting if
there is not already one (yet one that should be avoided).

Besides, your "img" element lacks the "alt" attribute which is
Invalid (X)HTML.
</div>
<div id="CaptionBox">
</div>
</div>

In my Javascript I have:

document.getElementById("picRange").innerHTML= "Picture " + (curPic +
1) + " of " + captions.length;

document.getElementById("CaptionBox").innerHTML= captions[curPic];

Oh my, what a nonsense.

<http://pointedears.de/scripts/test/whatami>
Explanation:

The <div id="column3"> is a CSS layout directive.

Nonsense. It is the start tag of a (X)HTML "div" element. This
element is given an ID of "column3". The rendering engine will
format the element with an ID of "column3" according to a CSS rule
where the basic selector is #column3, if, and only if, there is any.
[...] I could have used DOM to do the text creation but went for
innerHTML

Nonsense. `innerHTML' is a DOM property, but of the proprietary
DOM Level 0, not the standards compliant (W3C) DOM Levels 1 to 3.
- it works in IE, Opera and Firebird/Firefox.

And it does not work in UAs that solely show standards compliant
behavior DOMs which is why it will fail in those UAs and in
Valid XHTML documents in working user agents. Thus it is not
suited for the Web (alone, without alternative branches).

Alas, this is but a continuation of the thoughtless nonsense presented here.

0. You are serving XHTML als text/html, but the proper MIME type
for XHTML is application/xhtml+xml, while text/html is considered
harmful here:

<http://groups.google.com/[email protected]>
<http://www.hut.fi/u/hsivonen/xhtml-the-point>
<http://www.hixie.ch/advocacy/xhtml>

1. Your document is *not* Valid XHTML 1.0 Transitional and does not
use reasonable stylesheet:

<http://validator.w3.org/check?uri=h...ipex.com/climb/eiger_slide.htm&ss=1;verbose=1>

Especially:

- A system identifier in the DOCTYPE declaration for an XML parser
to check against is missing.

- The "noscript" element must not be the child of the "html" element
nor would it serve any purpose here -- CSS != J(ava)Script

- The "style" element requires a "type" attribute with a valid MIME type

- "pt" is not a unit of length suited for the screen, it is for
printing as its absolute length differs between systems.

- The "script" element requires a "type" attribute with a "valid"
MIME type; for J(ava)Script, that would be `text/javascript'
or `application/x-javascript'.

- In XHTML, STAGO (<) and ETAGO (</) delimiters must be escaped if
part of an element with a PCDATA content model as the "script"
element or the content must be explicitely declared CDATA. The
content will be parsed otherwise.

In HTML, ETAGO delimiters must be escaped within scripts because
either the ETAGO delimiter or the </script> tag would cause the
script end too early.

2.

| var pictures = new Array("../pictures/eiger/eiger_01.jpg",
| "../pictures/eiger/eiger_21.jpg",
| [...]
|
| var captions = new Array('<p class="para">The North face from the
| Kleine Scheidegg railway.</p>',
| '<p class="para">The North Face in evening light.</p>',
| [...]
| );

Why do you create such fragmentation of data and why do you include
the "p" element in the data so that it becomes dependent not only
on the markup language but on the stylesheet language as well?

There should be only *one* Array of objects to have the former array
elements as property values. The prefix path should be stored in a
prefix variable to be used later.

For example:

var prefix = "../pictures/eiger/";
var pictures = [
{src: "eiger_21.jpg",
caption: "The North Face in evening light."},
...
];

...
<div><p class="para" id="CaptionBox"></p></div>

An XHTML UA should support ECMAScript 3 but even if it does not, you can
use prototype constructors for both Array and your image data object to
circumvent the unsupported "[...] and "{...}" literals.


HTH

PointedEars
 
T

Thomas 'PointedEars' Lahn

Thomas said:
[more about http://www.aqvi55.dsl.pipex.com/climb/eiger_slide.htm]
- A system identifier in the DOCTYPE declaration for an XML parser
to check against is missing.

I stand corrected. It is not missing, but invalid (which
is the equivalent when it comes to Quirks Mode, e.g.).
It is

http://www.w3.org/TR/xhtml1/DTD/xhtml1-translational.dtd

and should be

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd

(The DTD has to do with the *transition* from deprecated
markup elements and attributes to stylesheet-styled markup,
not a translation of one DOCTYPE into another.)

Well, that may have been only a typo here. But some parts
of the DOCTYPE declaration are case-sensitive and I doubt
that

-//W3C//DTD XHTML 1.0 TRANSITIONAL//EN

is a valid public identifier. Should be

-//W3C//DTD XHTML 1.0 Transitional//EN

That is at least what the XHTML Specification and the
WDG Validator make me believe.


PointedEars
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top