Captions for Javascript slideshow

[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
usb15@cox.net.

Any help would be great.

[Andrew Thompson]

Re: Captions for Javascript slideshow

On 15 Jul 2004 20:48:29 -0700, CB US 77 wrote:
[color=blue]
> If you want to see the html, send me an email ..[/color]

If you want anyone to look at the HTML,
...put it on the *internet*!

--
Andrew Thompson
http://www.PhySci.org/ Open-source software suite
http://www.PhySci.org/codes/ Web & IT Help
http://www.1point1C.org/ Science & Technology

[Bob Wightman]

Re: Captions for Javascript slideshow

clbradford@cox. net (CB US 77) wrote in message news:<aea91212. 0407151948.27ac 5128@posting.go ogle.com>...[color=blue]
> 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
> usb15@cox.net.[/color]

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="PictureBo x" >
</div>
<div id="CaptionBox" >
</div>
</div>

In my Javascript I have:

document.getEle mentById("picRa nge").innerHTML = "Picture " + (curPic +
1) + " of " + captions.length ;

document.getEle mentById("Capti onBox").innerHT ML= 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

[Thomas 'PointedEars' Lahn]

Re: Captions for Javascript slideshow

Bob Wightman wrote:[color=blue]
> clbradford@cox. net (CB US 77) wrote in message news:<aea91212. 0407151948.27ac 5128@posting.go ogle.com>...[/color]

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.
[color=blue]
> 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="PictureBo x" >[/color]
^^^^^^^^^^^
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="PictureBo x">');

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.
[color=blue]
> </div>
> <div id="CaptionBox" >
> </div>
> </div>
>
> In my Javascript I have:
>
> document.getEle mentById("picRa nge").innerHTML = "Picture " + (curPic +
> 1) + " of " + captions.length ;
>
> document.getEle mentById("Capti onBox").innerHT ML= captions[curPic];[/color]

Oh my, what a nonsense.

<http://pointedears.de/scripts/test/whatami>
<http://pointedears.de/scripts/test/hoverMe/>
[color=blue]
> Explanation:
>
> The <div id="column3"> is a CSS layout directive.[/color]

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.
[color=blue]
> [...] I could have used DOM to do the text creation but went for
> innerHTML[/color]

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

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).
[color=blue]
> See http://www.aqvi55.dsl.pipex.com/climb/eiger_slide.htm for how
> this looks.[/color]

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.c om/groups?hl=de&lr =&ie=UTF-8&selm=Pine.LNX .4.30.011021201 1500.29485-100000%40lxplus 023.cern.ch>
<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.or g/check?uri=http://www.aqvi55.dsl. pipex.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">Th e North face from the
| Kleine Scheidegg railway.</p>',
| '<p class="para">Th e 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.j pg",
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

[Thomas 'PointedEars' Lahn]

Re: Captions for Javascript slideshow

Thomas 'PointedEars' Lahn wrote:[color=blue]
> [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.[/color]

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