...

View Full Version : 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- :o 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
<!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
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:


<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
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
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
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? :D



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum