473,230 Members | 1,524 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

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

Captions for Javascript slideshow

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
us***@cox.net.

Any help would be great.
Jul 23 '05 #1
4 2702
On 15 Jul 2004 20:48:29 -0700, CB US 77 wrote:
If you want to see the html, send me an email ..


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
Jul 23 '05 #2
cl********@cox.net (CB US 77) wrote in message news:<ae**************************@posting.google. com>...
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
us***@cox.net.


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
Jul 23 '05 #3
Bob Wightman wrote:
cl********@cox.net (CB US 77) wrote in message news:<ae**************************@posting.google. com>...
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>
<http://pointedears.de/scripts/test/hoverMe/>
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).
See http://www.aqvi55.dsl.pipex.com/climb/eiger_slide.htm for how
this looks.


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/groups?hl=de&lr=&ie=UTF-8&selm=Pine.LNX.4.30.0110212011500.29485-100000%40lxplus023.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.org/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">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
Jul 23 '05 #4
Thomas 'PointedEars' Lahn wrote:
[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/xhtm...nslational.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
Jul 23 '05 #5

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

6
by: Terry | last post by:
Hi, I hope this problem I ran into has an easy fix. I created a menu bar for my page using Sothink DHTML Menu 4.1 which created javascript file. I also add a small slide show on the page...
2
by: Jeannie | last post by:
I have a popup window which is a slideshow of about 7 images. When the popup window loads, the first image is present and then the viewer can select next or previous to scroll through the rest of...
6
by: Dan Webb | last post by:
Hi All, Im currently working on ways of pacakaging javascript functions/variables/objects in a similar way to the Java package statement so that scripts can be interact with each other with the...
7
by: Bob Phillips | last post by:
Hope someone can help. I am struggling to write an meta element in JS. The meta element in question is the refresh element. This is the code I am using ...
5
by: Brian.Steele | last post by:
Greetings everyone. See http://www.spiceisle.com/cgi-bin/slideshow/slideshow.cgi?dir=brian/personal/2005/uk_trip/images&type=jpg The "Pause" button works in IE, but not in Firefox. Any ideas...
22
by: bevoldjling | last post by:
Hi ! I need some help in putting together a website for our family gathering. Although I'm still pretty "green", I don't think what I need requires terribly advanced skills ...except for one...
1
by: gencode | last post by:
I have this bit if javascript and it animates an image well, the problem is that the more it runs the more memory it eats on the client machine. Can anyone help me make this not eat all avaliable...
3
by: Gaby Sandoval | last post by:
I have a very simple javascript slideshow. It is extremely basic (see small sample below): <script language="JavaScript1.1"> <!-- //specify interval between slide (in mili seconds) var...
3
by: krzysztof.murkowski | last post by:
Hi, I have problem with JavaScript for gallery of images. From the overview page with thumbnails, after a click on the small picture, the subpage 'slide_show.html' is called, with a number of...
0
by: VivesProcSPL | last post by:
Obviously, one of the original purposes of SQL is to make data query processing easy. The language uses many English-like terms and syntax in an effort to make it easy to learn, particularly for...
0
by: jianzs | last post by:
Introduction Cloud-native applications are conventionally identified as those designed and nurtured on cloud infrastructure. Such applications, rooted in cloud technologies, skillfully benefit from...
0
by: abbasky | last post by:
### Vandf component communication method one: data sharing ​ Vandf components can achieve data exchange through data sharing, state sharing, events, and other methods. Vandf's data exchange method...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
0
by: fareedcanada | last post by:
Hello I am trying to split number on their count. suppose i have 121314151617 (12cnt) then number should be split like 12,13,14,15,16,17 and if 11314151617 (11cnt) then should be split like...
0
Git
by: egorbl4 | last post by:
Скачал я git, хотел начать настройку, а там вылезло вот это Что это? Что мне с этим делать? ...
0
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: Aftab Ahmad | last post by:
So, I have written a code for a cmd called "Send WhatsApp Message" to open and send WhatsApp messaage. The code is given below. Dim IE As Object Set IE =...

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.