PDA

Click to See Complete Forum and Search --> : slide show

sneezy
03-31-2003, 02:12 PM
Hi,

I would like to have about 4 different slide shows in one table on one page. I located the javascript for 1 I just need to add to the code ! I don't know where to start please help me !

Many thanks

S








<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>JavaScript Slide Show by Mike McGrath</TITLE>
<META http-equiv=Content-Type content="text/html; charset=windows-1252">

<!-- Step 1 : Copy this section and paste between the <HEAD> </HEAD> tags on your page -->
<SCRIPT type="text/javascript">
<!-- Original: Mike McGrath (mike_mcgrath@lineone.net) -------------------------------->
<!-- Web Site: http://website.lineone.net/~mike_mcgrath -------------------------------->
<!--

// preloader
var img=new Array();
img[0]=new Image(); img[0].src="java_picts/indexpict02.gif";
img[1]=new Image(); img[1].src="java_picts/indexpict03.gif";
img[2]=new Image(); img[2].src="java_picts/indexpict04.gif";

var interval=3000; // change this value to change the speed, ie: 2000 = 2 seconds between slides
var n=0;
var imgs = new Array("images/index_r3_c3.gif","java_picts/indexpict02.gif","java_picts/indexpict03.gif","java_picts/indexpict04.gif");
function rotate()
{
if(navigator.appName=="Netscape" && document.getElementById)
{
document.getElementById("p").src=imgs[n];
}
else document.images.p.src=imgs[n];
(n==(imgs.length-1))?n=0:n++;
setTimeout("rotate()",interval);
}
// -->
</SCRIPT>
<!-- Change the image filenames ("otis1.jpg", etc) to the names of YOUR image files ----->
<!-- Change the delay figure of 3000 to suit your prefence - 5000 would be 5 seconds. --->
<!-- End of Step 1 ---------------------------------------------------------------------->

</HEAD>
<BODY leftMargin="0" topMargin="0" onload="rotate()" marginwidth="0" marginheight="0">
<table width="790" cellspacing="0" cellpadding="0">
<tr>
<td width="3">&nbsp;</td>
<td width="204">&nbsp;</td>
<td width="575">&nbsp;</td>
<td width="6">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td><img height=249 alt=Slide src="images/index_r3_c3.gif" width=197 name="p" id="p"></td>
<td><img height=249 alt=Slide src="images/index_r3_c3.gif" width=197 name="p" id="p"></td>
<td>&nbsp;</td>
</tr>
</table>
</BODY></HTML>
Ice3T
03-31-2003, 05:23 PM
First thing this script as is is no good for you becaus it will auto start.

#1
<BODY leftMargin="0" topMargin="0" onload="rotate()" marginwidth="0" marginheight="0">
<table width="790" cellspacing="0" cellpadding="0">
remove the from it -->onload="rotate()"<--
that means as soon as the page loads start the slide show instead put--> <a href="javascript:voide(0); "onClick="rotate()">start show</a> where ever you what it to be and you users will click on it to start the slidshow


#2
var img=new Array();
img[0]=new Image(); img[0].src="java_picts/indexpict02.gif";
img[1]=new Image(); img[1].src="java_picts/indexpict03.gif";
img[2]=new Image(); img[2].src="java_picts/indexpict04.gif";

each one of these is for one of the images of your slid show so if you have 50 images you will have 50 lines like this.
where it says java_picts/indexpict02.gif you replace this with a directory and file name according to where you put yours
example .src="mydocuments/girl.gif"
get it?

#3
You should only have one of this name="p" id="p"
<img height=249 alt=Slide src="images/index_r3_c3.gif" width=197 name="p" id="p">

it "saves" the spot for your slidshow

if you what more than one slid show make an other "spot saver" with a diff name/id like:

<img height=249 alt=Slide src="images/index_r3_c3.gif" width=197 name="q" id="q">


#4
you should scrap this
var imgs = new Array("images/index_r3_c3.gif","java_picts/indexpict02.gif","java_picts/indexpict03.gif","java_picts/indexpict04.gif");

#5
change this:
var img=new Array();
to this:
var imgs=new Array();

#6
then copy this
function rotate()
{
if(navigator.appName=="Netscape" && document.getElementById)
{
document.getElementById("p").src=imgs[n];
}
else document.images.p.src=imgs[n];
(n==(imgs.length-1))?n=0:n++;
setTimeout("rotate()",interval);
}

paste it 4X and change

function rotate()
and
setTimeout("rotate()",interval);

to

function rotate1() and setTimeout("rotate1()",interval);
function rotate2() and setTimeout("rotate2()",interval);
etc.

#7
Great your a pro,
now you remember this from the top
<a href="javascript:voide(0); "onClick="rotate()">start show</a> where ever you what it to be and you users will click on it to start the slidshow

you need one for each slid show
copy it and change the:
"onClick="rotate()"
to "onClick="rotate1()"
"onClick="rotate2()"
etc

#Last
if it still doesn't work go to:
http://www.htmlgoodies.com/primers/jsp/jsp_toc.html

and read all 30 after that it will work and you can answer someone else's question about slidshow
SPD
03-31-2003, 11:40 PM
We have a variety of pre-made slideshows here:

http://www.superprodesign.com/spd/scripts/scripts.html

under the "images" category, starting in page 2 of that category.

Maybe you will find one that's useful...

SPD :D
sneezy
04-01-2003, 02:28 AM
Thanks for the java stuff I don't actually wont the viewer to click on a button to make the slide show work I'd rather it automatically work ! Like this www.buffalo-shoes.com/test. So does this effect the code you've given me ? I'll check out the websites too.

Many Thanks

S
Ice3T
04-01-2003, 10:38 AM
A bit,
if I get it, you want the four slid shows to play automaticly

ok
instead of this

"onClick="rotate()"
"onClick="rotate1()"
"onClick="rotate2()"
"onClick="rotate3()"

use onLoad="rotate(),rotate1(),rotate2(),rotate3()"
in the <BODY>
it will look like this:
<BODY onLoad="rotate(),rotate1(),rotate2(),rotate3()">
sneezy
04-06-2003, 04:16 PM
Sorry but I'm stuck on where to begin with my four slide shows ! Here's my code so far

<SCRIPT type="text/javascript">
<!-- Original: Mike McGrath (mike_mcgrath@lineone.net) -------------------------------->
<!-- Web Site: http://website.lineone.net/~mike_mcgrath -------------------------------->
<!--

// preloader
var img=new Array();
img[0]=new Image(); img[0].src="images_style/02a.jpg";
img[1]=new Image(); img[1].src="images_style/03a.jpg";
img[2]=new Image(); img[2].src="images_style/04a.jpg";
img[3]=new Image(); img[3].src="images_style/05a.jpg";
img[4]=new Image(); img[4].src="images_style/06a.jpg";
img[5]=new Image(); img[5].src="images_style/07a.jpg";
img[6]=new Image(); img[6].src="images_style/08a.jpg";
img[7]=new Image(); img[7].src="images_style/09a.jpg";
img[8]=new Image(); img[8].src="images_style/10a.jpg";
img[9]=new Image(); img[9].src="images_style/11a.jpg";

var interval=5000; // change this value to change the speed, ie: 2000 = 2 seconds between slides
var n=0;
var imgs = new Array("images/style_r3_c2.gif","images_style/02a.jpg","images_style/03a.jpg","images_style/04a.jpg","images_style/05a.jpg","images_style/06a.jpg","images_style/07a.jpg","images_style/09a.jpg","images_style/10a.jpg","images_style/11a.jpg");
function rotate()
{
if(navigator.appName=="Netscape" && document.getElementById)
{
document.getElementById("p").src=imgs[n];
}
else document.images.p.src=imgs[n];
(n==(imgs.length-1))?n=0:n++;
setTimeout("rotate()",interval);
}
// -->
</SCRIPT>

and my body code

<body bgcolor="#006699" background="backgroundstyle.gif" leftmargin="0" topmargin="0" onload="rotate()"onLoad="MM_preloadImages('images/style_r1_c3_f2.gif','images/style_r1_c7_f2.gif','images/style_r1_c9_f2.gif','images/style_r1_c13_f2.gif');">

and my table which contains my slide shows is

<tr>
<td rowspan="4"><img name="style_r3_c1" src="images/style_r3_c1.gif" width="70" height="360" border="0" alt=""></td>
<td rowspan="3" colspan="2"><img height=344 alt=Slide src="images/style_r3_c2.gif" width=268 name="p" id="p"></td>
<td rowspan="4"><img name="style_r3_c4" src="images/style_r3_c4.gif" width="10" height="360" border="0" alt=""></td>
<td colspan="5"><img height=196 alt=Slide src="images/style_r3_c5.gif" width=190 name="q" id="q"></td>
<td rowspan="4"><img name="style_r3_c10" src="images/style_r3_c10.gif" width="9" height="360" border="0" alt=""></td>
<td rowspan="3" colspan="3"><img height=344 alt=Slide src="images/style_r3_c11.gif" width=178 name="s" id="s"></td>
<td rowspan="4"><img name="style_r3_c14" src="images/style_r3_c14.gif" width="65" height="360" border="0" alt=""></td>
<td><img src="images/spacer.gif" width="1" height="196" border="0" alt=""></td>
</tr>
<tr>
<td colspan="5"><img name="style_r4_c5" src="images/style_r4_c5.gif" width="190" height="11" border="0" alt=""></td>
<td><img src="images/spacer.gif" width="1" height="11" border="0" alt=""></td>
</tr>
<tr>
<td colspan="5"><img height=137 alt=Slide src="images/style_r5_c5.gif" width=190 name="r" id="r"></td>
<td><img src="images/spacer.gif" width="1" height="137" border="0" alt=""></td>
</tr>

so I've changes the id and name. One of the slide show id p is fine but I'm not sure how to make q,r & s to work.

the images/slides are the same name except q is 02b.jpg, r is 02c.jpg & s is 02d.jpg and they go up to 11d.jpg.

How do I get the slides to work? on different times ie 6000, 9000 e.t.c?

Sorry but I really struggling on this!

Many thanks
sneezy
04-06-2003, 04:45 PM
url

http://www.buffalo-shoes.com/test/style.htm

thanks
SPD
04-06-2003, 08:52 PM
:D Good news!!!

Stop the struggle.

Just try this link....

http://www.superprodesign.com/spd/scripts/images/slide33.html

Don't forget to preload your images before you place the slideshows...

http://www.superprodesign.com/spd/scripts/images/preload1.html

SPD ;)