PDA

View Full Version : Viewing multiple images on a single page.

tobo
09-05-2008, 08:01 AM
Dear all.

I see this done many times on many websites (especially comic websites) where an image has a forwards and backwards arrow button, and images selected correspondingly.

Ideally I want the [img src="images/001.jpg"] file name to increase by one each time. So all I have to do is add more images in ever increasing filenames to the images folder, 002.jpg, 003.jpg etc.

How do I add one to a filename and then refresh the page?

Can I do this in XHTML ?

Many thanks.
bretski00
09-05-2008, 04:13 PM
This way works. Is this what you were asking for?

I created 5 images in the folder of this page, they were named img001.jpg...img005.jpg


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<SCRIPT DEFER LANGUAGE="JAVASCRIPT" TYPE="text/javascript">
var NumberOfImages = 5;
var SelectedImage = 1;

function PrevImage()
{
if(SelectedImage-1 >= 1)
{
SelectedImage -= 1;
document.getElementById('ImageToChange').src = 'img00' + SelectedImage + '.jpg';
}
}

function NextImage()
{
if(SelectedImage+1 <= NumberOfImages)
{
SelectedImage += 1;
document.getElementById('ImageToChange').src = 'img00' + SelectedImage + '.jpg';
}
}

</SCRIPT>

</head>

<body>
<input type=button value="Prev" onclick="javascript:PrevImage()">
<input type=button value="Next" onclick="javascript:NextImage()">

<img id="ImageToChange" src="img001.jpg">
</body>

</html>
althalus
09-05-2008, 05:34 PM
Many of them use WordPress with ComicPress (http://mindfaucet.com/comicpress/). Haven't used it myself, but the comics I've seen using it are pretty neat looking.
tobo
09-20-2008, 01:57 AM
Bretski001 - thank you, that was fantastic.

Just what I needed.

Thankyou
tobo
09-20-2008, 02:10 AM
How would I position the images in the above example?
tobo
09-20-2008, 05:48 AM
Okay, ignore that question. I worked it out.

However, is there a way I can incorporate a caption with each image?
tobo
09-23-2008, 01:36 PM
Forgive me for bumping (3 days is acceptable elsewhere).

Can anyone help me add captions to the above/below Javascript?

Thankyou.