PDA

View Full Version : Wanted: Mega Help with Java Script



ChuckDrew
07-18-2007, 04:52 AM
I'm rather new to web development, in fact I am working on my first "real" website (other than the "Hello World" lessons I have done in the past few weeks).

I am trying to build a website for my sister, she is trying her own at becoming an art photographer for a living, so far she is breaking even.

Here's my issue concerning Java Script (I have included the code for what I have so far below). I am making a javascript slide show so users can click on thumbnails of her photos which will take them to their respective enlarged photo in the slide show. Once in the slide show they can click "next" and "previous" to move from enlarged image to enlarged image. I also have a feature that will switch the images in the slide show automatically every 3000 ms.

What I need to do is add a comment and a title to each image in the slide. So basically two separate bits of text to each image in the slide show, so the text changes with each image change.

Also, from the thumbnail gallery, how could I link into a specific image on the slide show? Is it possible?

I know this is really long winded but I hope it makes sense. I am almost at the point of using just plain html and no js.

Any insight would be greatly appreciated. Thanks- Chuck

Thank god for the Firefox spell checker.

Code:
---------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Photo Gallery</title>
<script type="text/javascript">

<!-- Begin
NewImg = new Array (
"gallery1/Bentzstreetsite.jpg",
"gallery1/fog1site.jpg",
"gallery1/fog2site.jpg",
"gallery1/fog3site.jpg",
"gallery1/perfectviewsite.jpg",
"gallery1/tidalpoolsite.jpg",
"gallery1/timothygrasssite.jpg",
"gallery1/treetopsite.jpg",
"gallery1/view1site.jpg",
"gallery1/waterfordsite.jpg"
);

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);
}
}
</script>
</head>

<body>

<img src="gallery1/Bentzstreetsite.jpg" name="slideshow">
<table>
<tr>
<td align="right"><a href="javascript:chgImg(-1)">Previous</a></td>
<td align="center"><a href="javascript:auto()">Slide-Show</a></td>
<td align="left"><a href="javascript:chgImg(1)">Next</a></td>
</tr>
</table>

</body>
</html>

djr33
07-18-2007, 05:09 AM
That is a pretty simple script, but seems to logical to me.
However, it doesn't really allow for having more content there, without adding something.

Basically, you should change your approach from using an image object to using a page block element.

Use a <div id="slideshow">, then when it is changed, write from 3 arrays the image, description and title, in whatever format you want. You can also include a link for the image, probably in a 4th array.

Sliight
07-18-2007, 07:40 AM
I'm still pretty new to this... I just took a crash course on HTML, and then CSS from the guys recommendations here.

I have ton a ton of browsing, and I found a site I really like for slideshows...it's just not applicable to what I need. You however, may want to check it out. When you click a screenshot just look for the demo link. To me they would be great for someone needing to show off paintings or photos.

http://www.smashingmagazine.com/2007/05/18/30-best-solutions-for-image-galleries-slideshows-lightboxes/