Simple Slide Show- please help

2withspirit · 03-09-2005, 06:05 PM

Hi-
First things first, I will pay someone for their work. At this point I might wash your car, babysit your neighbor's kids, rake leaves, -the bargaining table is open. lol seriously though - I will gladly pay someone for this.
I've been scouring the web until 3 and 4am the last 3 days, trying to learn this. omg-

One more day and I will either go insane or my laptop will earn it's own frequent flyer miles.

I'm in need of a slide show for a website about my husband's death. The photos are of his vehicle after the wreck and of the intersection the wreck occurred in. Should be aware, none of the pictures are overly graphic but blood is visible in a few of the photos.
The site is here -
http://www.2withspirit.com/?p=1

I'm using WordPress but the slide show does not need to integrate - only need a static HTML page to link to from the site map. I have the background, header, and footer image. Slide show will have 41 images, no descriptions. The images are 2 sizes, all under 380x380, already named in the order they will appear. "back" and "next" text in Times Roman Italics below each image for navigation.

If interested, pleeeeease contact me. thank you.
Have a great day.
Catonya

hemebond · 03-09-2005, 09:20 PM

54087.html

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
	<head>
		<title>54087</title>
		<style type="text/css">
			#slideshow
			{
				list-style:none;
				padding:0;
				margin:0;
			}
		</style>
	</head>
	<body>
		<ul id="slideshow">
			<li><img src="/images/1.jpeg" alt="Image 1"></li>
			<li><img src="/images/2.jpeg" alt="Image 2"></li>
			<li><img src="/images/3.jpeg" alt="Image 3"></li>
			<li><img src="/images/4.jpeg" alt="Image 4"></li>
			<li><img src="/images/5.jpeg" alt="Image 5"></li>
		</ul>

		<script type="text/javascript" src="54087.js"></script>
		<script type="text/javascript">var slideShow = new SlideShow('slideshow');</script>
	</body>
</html>

54087.js

Code:

function SlideShow(ss)
{
	var list = document.getElementById(ss);

	this.toggleCurrentItem = function ()
	{
		var item = this.items[this.currentItem];

		item.style.display = (item.style.display == 'none') ? '' : 'none';
	}

	this.next = function ()
	{
		this.toggleCurrentItem();

		if(++this.currentItem >= this.items.length)
		{
			this.currentItem = 0;
		}

		this.toggleCurrentItem();
	}

	this.prev = function ()
	{
		this.toggleCurrentItem();

		if(--this.currentItem < 0)
		{
			this.currentItem = this.items.length - 1;
		}

		this.toggleCurrentItem();
	}

	this.createButton = function (value, handler)
	{
		var button = document.createElement('input');
		button.setAttribute('type', 'button');
		button.setAttribute('value', value);

		var thisObject = this;
		button.onclick = function(){thisObject[handler]()};

		list.parentNode.insertBefore(button, list.nextSibling);
	}

	this.createButton('Next', 'next');
	this.createButton('Previous', 'prev');

	this.items = list.getElementsByTagName('li');

	this.currentItem = 1;

	for(var len = this.items.length; this.currentItem < len; this.currentItem++)
	{
		this.toggleCurrentItem();
	}

	this.currentItem = 0;
}

Shen · 03-10-2005, 05:28 AM

Couldn't that have been made a lot simpler? Maybe there's something I'm not getting, but here's my code:

Code:

<html>
<!--Shen-->
<!--slideshow.html-->
<!--Creates a JavaScript slideshow with "Back" and "Next" options-->

<head>
<title>JavaScript Slideshow</title>

<script>
var imgArray = new Array(4);
var index = 0;

imgArray[0] = new Image;
imgArray[0].src = "img1.jpg";
imgArray[1] = new Image;
imgArray[1].src = "img2.jpg";
imgArray[2] = new Image;
imgArray[2].src = "img3.jpg";
imgArray[3] = new Image;
imgArray[3].src = "img4.jpg";

function doBack(){
  index --;

  if (index < 0){
    index = 3;
  } // end if

  document.slideshow.src = imgArray[index].src;
} // end doBack

function doNext(){
  index ++;

  if (index > 3){
    index = 0;
  } // end if

  document.slideshow.src = imgArray[index].src;
} // end doNext
</script>

</head>
<body>

<center>
<h1><hr color = black>Slideshow<hr color = black></h1>
<p>
<img src = "img1.jpg"
     name = "slideshow">
<p>

<h3>
<a href = javascript:doBack()>Back</a>
&nbsp;&nbsp;&nbsp;
<a href = javascript:doNext()>Next</a>
</h3>

</center>
</body>
</html>

There are only four image objects in this example, but more can be added. I hope this helps.

--- Shen

glenngv · 03-10-2005, 05:38 AM

Quote:

Originally Posted by Shen

Couldn't that have been made a lot simpler? Maybe there's something I'm not getting, but here's my code:

hemebond's slideshow script is OO-based, so you can have multiple slideshows in a single page.

Here's another great OO-based slideshow script:

http://www.peterbailey.net/dhtml/oo_slideshow.htm

hemebond · 03-10-2005, 05:58 AM

Quote:

Originally Posted by Shen

Couldn't that have been made a lot simpler? Maybe there's something I'm not getting, but here's my code:

Your code falls apart when Javascript is disabled. My code may not be a sexy as it could be, but it takes care of itself, and requires very little code in the HTML page.

2withspirit · 03-10-2005, 05:08 PM

thank you all for replying, i really appreciate it. someone has contacted me and kindly offered to help.

thanks again.
Catonya

glenngv · 03-11-2005, 01:26 AM

Quote:

Originally Posted by 2withspirit

thank you all for replying, i really appreciate it. someone has contacted me and kindly offered to help.

thanks again.
Catonya

Who got the paycheck?