...
PDA

Multiple Slidshows

theGnome
06-18-2002, 06:47 AM
Hi Gang

I need to get three slidshows working on the same page.

each slideshow is to run 4 or 5 images but each slide show will link to only one url each.

I have tried using the slide show codes in the freescript area and then modifing them to make them all individual. but they refu=se to run together.

Has anybody got a script that will do this or know of a site that uses multile slideshows on one page so that I can study the code?

Cheers all
theGnome
FJbrian
06-19-2002, 03:13 AM
use I frames and remove the frameborder so it looks as if it's part of the page
in the meta tage of the framed page put a redirect to the next page/slide
link the images in the html as you normally would

<iframe src="whatever.htm" width=200 height=200 frameborder=0></iframe>
FJbrian
06-19-2002, 04:05 PM
hey gnome, got your email. Just wokeup. Fought with a cgi script til way too late last night.
I did tell ya how to do it in the last post, I didn't explain it well?
I'll try again


MAIN HTML PAGE:
<html>
<head>
<meta....whatever search engine jazz ya normally put
</head>
<body>

<font face="ComicSans MS">Welcome to Page Whatever</font><br>
<hr>
<table width="100%">
<tr><td>
<iframe src="show1.htm" width=200 height=200 frameborder=0></iframe>(this line and above line are one line of code)
</td><td>
<iframe src="show6.htm" width=200 height=200 frameborder=0></iframe>
</td><td>
<iframe src="show11.htm" width=200 height=200 frameborder=0></iframe>
</td></tr>
</table>

<br>
<font face="Trebuchet MS">Thanks for visiting</font>


</body>
</html>

Show1.htm, Show2.htm, show3...4..

<html>
<head>
<meta http-equiv="refresh" content="show2.htm">
(show 2 wll redirect to show3, show 3 to show 4 etc)
</head>
<body>
<img src=yourimage.JPG>
</body>
</html>

****************
I'm still sleepy, that meta tag doesn't look right to me
My editor just pastes it in. If yours does the same, do that..don't copy that line of code.
****************

show 4.htm wouldn't redirect to anywhere, that's the last pic
show5.htm redirects to show 6, show 7 show 8
show 10 redirects to show 11, show 12.htm show13.htm...
FJbrian
06-19-2002, 04:27 PM
another way?
sure there's countless ways you can do this
the "3 slideshows at one time" statement you wrote makes it a little difficult.
Javascript is pretty quick if you go from slideshow 1 to 2 to 3, back to 1 to 2 to 3 back to 1 to 2 to 3... it'll run thru pretty fast.
PLUS not sure what you're using this for but chances are your visitor can't watch three things at once
well here:


instead of 3 iframes use 3 forms

the face of the button can be an image so use a giant button
HTML goodies, Javascript Kit...there are countless tutorials on this, it's just "style"
name your forms whatever, whatever2, whatever3

one javascript function

two global variables
your 3 array of images
array(image1,image2,image3.........)
x=1

function changin(){
y=array.length;
for loop that runs Y amount of times
(like for i=0, i<y, i++)
document.formname.buttonname.value=array[i]
x=x+1;(so now it'll be 2)
document.formname[x].buttonname.value=array2[i]
x=x+1;(now it'll be 3)
document.formname[x].buttonname.value=array3[i]
x=1(back to 1 as loop is going around again)

} (loop return)

x=1,y=1,i=0;(just in case someone runs the script more than once set variables to beginning #)
return true;

}

call the function however you'd like
OnLoad or with a click
webdesign125
06-19-2002, 05:57 PM
Hi,

I have been having trouble with multiple slide shows myself. I came across this website a while ago and tried to study the source code but got confused.

http://www.designerpearloutlet.com/index.htm?source=overture_jewelry_store

in particular this set of code that relates to the slide shows:

<SCRIPT LANGUAGE="JavaScript">
<!--
//Begin ss1
if (document.images){
var imgc = new Array();
imgc[0] = new Image();
imgc[0].src = "images/hpr26i6a.jpg";
imgc[1] = new Image();
imgc[1].src = "images/hprcd15i13.jpg";
imgc[2] = new Image();
imgc[2].src = "images/hprcd15i15.jpg";
imgc[3] = new Image();
imgc[3].src = "images/hprcd15i09.jpg";
imgc[4] = new Image();
imgc[4].src = "images/hprmic14kgw.jpg";
}
var z = 0;
delay1 = 3700;
function rotate_ss1() {
if (document.images) {
document.ss1.src = imgc[z].src;
(z == (imgc.length - 1)) ? z = 0 : z++;
window.setTimeout("rotate_ss1()", delay1);
}
}
//window.onload = rotate3;
// End ss1 -->
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
<!--
//Begin ss2
if (document.images){
var imga = new Array();
imga[0] = new Image();
imga[0].src = "images/hpr21i25.jpg";
imga[1] = new Image();
imga[1].src = "images/hpbcd12i21.jpg";
imga[2] = new Image();
imga[2].src = "images/hpr30i37.jpg";
imga[3] = new Image();
imga[3].src = "images/hpr23i9a.jpg";
imga[4] = new Image();
imga[4].src = "images/hp12061.jpg";
}
var n = 0;
delay2 = 3100;
function rotate_ss2() {
if (document.images) {
document.ss2.src = imga[n].src;
(n == (imga.length - 1)) ? n = 0 : n++;
window.setTimeout("rotate_ss2()", delay2);
}
}
//window.onload = change;
// End ss2 -->
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
<!--
//Begin ss3
if (document.images){
var imgb = new Array();
imgb[0] = new Image();
imgb[0].src = "images/hpccd12i171.jpg";
imgb[1] = new Image();
imgb[1].src = "images/hpcr39i22a.jpg";
imgb[2] = new Image();
imgb[2].src = "images/hpcr00i31.jpg";
imgb[3] = new Image();
imgb[3].src = "images/hpcr00i01.jpg";
imgb[4] = new Image();
imgb[4].src = "images/hpccd12i89.jpg";
}
var y = 0;
delay3 = 3700;
function rotate_ss3() {
if (document.images) {
document.ss3.src = imgb[y].src;
(y == (imgb.length - 1)) ? y = 0 : y++;
window.setTimeout("rotate_ss3()", delay3);
}
}
//window.onload = swap;
// End ss3 -->
</SCRIPT>
</HEAD>


do i have to create a ss1, ss2, and ss3 as seperate pages from the html document? If someone could explain how it works because it is confusing.

I hope that this site helps you TheGnome.

Thanks in advance.
FJbrian
06-19-2002, 06:41 PM
I think they're the names of forms
look at the source code
scroll down to the BODY section
and SEARCH for ss1
FJbrian
06-19-2002, 06:45 PM
I went and looked, not forms it's right here
<TD VALIGN="top"><FONT FACE="Arial,Geneva,Helvetica" SIZE="2"><A HREF="metals.htm"><!--<FONT COLOR="#333333"><B>Career/Evening</B></FONT><BR> -->
<IMG SRC="images/hp_14ksterling_v.gif" ALT="14K/Sterling" WIDTH="28" HEIGHT="176" BORDER="0"><IMG NAME="ss1" SRC="images/hpr26i6a.jpg" ALT="Career" WIDTH="118" HEIGHT="176" BORDER="0" VSPACE="4"></A><BR>
<BR>

kinda ugly javascript if ya ask me:)
Judy
06-20-2002, 04:05 PM
I hope we're talking about the same thing...

this was the first javascript I ever used. It was so easy that I was completely misled about using javascript!

I just used IFrames on the page, here's a link:
http://www.regardless-shorthairs.com/Buck.htm

Just right click to view source--code is there...

And here's the code for the "images2/Buck_homepix.htm" page:

(Remember, I don't claim to know what I'm doing. But this was really easy, and has worked well for me!)

<HTML> <HEAD>

<TITLE>Ch. Quick Buck Regardless -- Born to Love...
</TITLE>


<LINK rel="stylesheet" type="text/css" href="basic.css" title="style1">
<!--Place this script in the HEAD section.-->
<SCRIPT LANGUAGE = "JavaScript">
function changePage()
{
var f = document.forms.navigation;
var uri = f.pages.options[f.pages.selectedIndex].value;
newPage =
// These settings describe the pop-up browser
// window - you can edit them.
window.open(uri,"NewPage","height=480,width=640,location=no,scrollbars=yes,menubar=no,toolbar=no,resizable=yes,status=yes");

}
</script>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var rotate_delay = 5000; // delay in milliseconds (5000 = 5 secs)
current = 0;
function next() {
if (document.slideform.slide[current+1]) {
document.images.show.src = document.slideform.slide[current+1].value;
document.slideform.slide.selectedIndex = ++current;
}
else first();
}
function previous() {
if (current-1 >= 0) {
document.images.show.src = document.slideform.slide[current-1].value;
document.slideform.slide.selectedIndex = --current;
}
else last();
}
function first() {
current = 0;
document.images.show.src = document.slideform.slide[0].value;
document.slideform.slide.selectedIndex = 0;
}
function last() {
current = document.slideform.slide.length-1;
document.images.show.src = document.slideform.slide[current].value;
document.slideform.slide.selectedIndex = current;
}
function ap(text) {
document.slideform.slidebutton.value = (text == "Stop") ? "Start" : "Stop";
rotate();
}
function change() {
current = document.slideform.slide.selectedIndex;
document.images.show.src = document.slideform.slide[current].value;
}
function rotate() {
if (document.slideform.slidebutton.value == "Stop") {
current = (current == document.slideform.slide.length-1) ? 0 : current+1;
document.images.show.src = document.slideform.slide[current].value;
document.slideform.slide.selectedIndex = current;
window.setTimeout("rotate()", rotate_delay);
}
}
// End -->

</SCRIPT>

</head>

<BODY BACKGROUND="Walnut.jpg"" width=500
<center>
<form name=slideform>
<table cellspacing=1 cellpadding=4 bgcolor="transparent">
<tr><td align=center bgcolor="transparent">
<font color="#ffe4b5"><b></b></font>
</td></tr>

<tr><td align=center bgcolor="transparent" width=300 height=226>
<img src="Buck_Portrait3.jpg" name="show">
</td></tr>

<tr><td align=center bgcolor="transparent">
<select name="slide" onChange="change();">
<option value="Buck_Portrait4.jpg">Buck, '02
<option value="Buck_Portrait.jpg">Buck, '98
<option value="Buck_Running.jpg">Winter, '96
<option value="Buck_Teddy.jpg">Baby Buck--4 weeks old
<option value="Buck_Portrait3.jpg">Buck, '99
<option value="Freida_Buck.jpg">Buck & Freida, '02
<option value="Buck_Portrait2.jpg">Buck, '01
</td></tr>

<tr><td align=center bgcolor="transparent">
<input type="button" style="background-color: transparent; color: #ffe4b5; border-left: 5px outset #ffe4b5; border-right: 3px groove #ffe4b5; border-top: 3px groove #ffe4b5; border-bottom: 4px outset #ffe4b5" onClick="first();" value="|<<" title="Beginning">

<input type=button style="background-color: transparent; color: #ffe4b5; border-left: 5px outset #ffe4b5; border-right: 3px groove #ffe4b5; border-top: 3px groove #ffe4b5; border-bottom: 4px outset #ffe4b5" <input type=button onClick="previous();" value="<<" title="Previous">

<input type=button name="slidebutton" style="background-color: transparent; color: #ffe4b5; border-left: 5px outset #ffe4b5; border-right: 5px inset #ffe4b5; border-top: 3px groove #ffe4b5; border-bottom: 4px outset #ffe4b5"onClick="ap(this.value);" value="Start" title="AutoPlay">

<input type=button style="background-color: transparent; color: #ffe4b5; border-left: 3px groove #ffe4b5; border-right: 5px groove #ffe4b5; border-top: 3px groove #ffe4b5; border-bottom: 4px outset #ffe4b5" onClick="next();" value=">>" title="Next">

<input type=button style="background-color: transparent; color: #ffe4b5; border-left: 3px groove #ffe4b5; border-right: 5px groove #ffe4b5; border-top: 3px groove #ffe4b5; border-bottom: 4px outset #ffe4b5" <input type=button onClick="last();" value=">>|" title="End">
</form></center>
</td></tr></table>
</BODY></HTML>

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum