slideshow code waar en hoe ?

Redmage · 24 apr 2007

hallo

ik wil van m'n centrale foto van m'n site een slideshow maken zodat er nog andere afbeeldingen komen.
Ik had al hier op het forum wat code gezien maar als ik die toepas lijkt alles wat te verschuiven op m'n site en komt er geen slideshow. Wat doe ik verkeerd.

Dit is de code uit m'n body waar de centrale foto staat

<tr>
<td height="548"></td>
<td colspan="2" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">

<tr>
<td width="8" height="548"> </td>
<td width="520" valign="top"><img src="bigstockphoto_Hand_Pointing_Text_On_Book_520x548blur_grad.JPG" width="520" height="548"></td>
</tr>
</table></td>
</tr>

en dit is wat ik als 'script' had om toe te voegen.
<SCRIPT LANGUAGE="JavaScript">
var slide = new Array();
slide[0] = "wedding_520x548.JPG";
slide[1] = "houseplans_520x548.JPG";
slide[2] = "app_520x548.JPG";
slide[3] = "business deal_520x548.JPG";
slide[4] = "businesswoman_520x548.JPG";
slide[5] = "courthouseantwerp_520x548.JPG";
slide[6] = "business hall_520x548.JPG";

var current = 0;
function advance(){
current++;
if(slide[current]){document.images.show.src = slide[current];
window.status='Slide '+(current+1)+' of '+slide.length+': '+slide[current];}
}
function retract(){
current--;
if(slide[current]){document.images.show.src = slide[current];
window.status='Slide '+(current+1)+' of '+slide.length+': '+slide[current];}
}
var the_show = "";
function startShow() {
the_show = setInterval("advance();",5000);
};

Mis ik nog iets of is het verkeerd om dit script direct achter de laatste tr van m'n centrale foto te plaatsen.

peter vazed · 26 apr 2007

Je zult je script in een td tag moeten zetten.
Krijg je foutmeldingen?
Zet het gewoon op een nieuwe pagina, dus alleen het script, kijk wat er gebeurt.

bbniels · 6 mei 2007

kan je niet beter een extension gebruiken dat werkt toch veel eenvoudiger
met bijvoorbeeld http://www.amarasoftware.com/flash-slide-show.htm

JeroenE · 6 mei 2007

Gewoon je img de naam "show" geven :

HTML:

<img src="..." name="show".....>

Anders vindt het script je document.images.show niet.

En in de body-tag een onload zetten :

HTML:

<body onload="startShow();">

Het script zelf zou ik in de head van je document zetten.

Greetz : Jer

en.

Redmage · 7 mei 2007

jeroen, heb het script wat aangepast en ik krijg nu wel knoppen vorige + volgende MAAR :

1. de foto's veranderen niet automatisch als ik in preview (F12) kijk (had het aangepast naar 2000 miliseconden)
ik had alles in body gezet of kun je zeggen welk stuk ik in head en welk in body moet zetten ?

2. als ik op de knop volgende druk werkt wel : krijg ik wel een nieuwe foto te zien maar als ik op vorige druk krijg ik niet de vorige maar een andere foto ?? ook zijn er nog een paar 'lege' vakken : moet ik dan niet ergens in de code aanpassen want ik heb maar 5 of 6 foto's.

3. in design view is m'n mooie pagina nu helemaal in de war (alles staat op een andere plaats zodat het niet meer WYSWYG is :shocked: Misschien heb ik het script op een verkeerde plaats ingevoegd (moet dat niet op de plaats waar m'n foto staat ?"

Hier is de code tot dusver :
<SCRIPT LANGUAGE="JavaScript">
var slide = new Array();
slide[0] = "wedding_520x548.JPG";
slide[1] = "houseplans_520x548.JPG";
slide[2] = "app_520x548.JPG";
slide[3] = "business deal_520x548.JPG";
slide[4] = "businesswoman_520x548.JPG";
slide[5] = "courthouseantwerp_520x548.JPG";
slide[6] = "business hall_520x548.JPG";

var current = 0;
function advance(){
current++;
if(slide[current]){document.images.show.src = slide[current];
window.status='Slide '+(current+1)+' of '+slide.length+': '+slide[current];}
}
function retract(){
current--;
if(slide[current]){document.images.show.src = slide[current];
window.status='Slide '+(current+1)+' of '+slide.length+': '+slide[current];}
}
var the_show = "";
function startShow() {
the_show = setInterval("advance();",2000);
};

</SCRIPT>
<form name="formname">
<TABLE width="31%" cellpadding=1 cellspacing=1 bgcolor="#663300">
<TR>
</tr>
<TR>
<TD colspan=2 align=center bgcolor="ffffcc">
<div align="center"><img src="bigstockphoto_Hand_Pointing_Text_On_Book_520x548blur_grad.JPG" name="show" width=520 height=548></div></td></tr>
<tr><td align=center bgcolor="ffffcc" height=30 width="50%">
<input type=button onclick="retract();" value="vorige">
</td><td align=center bgcolor="ffffcc" height=30 width="50%">
<input type=button onclick="advance();" value="volgende"> </TD>
</TR>
</TABLE>
</form>
</table></td>
</tr>
<body onload="startShow();">
<tr>

Bedankt iedereen voor alle hulp:thumb:

JeroenE · 8 mei 2007

Het volgende komt in de head van je document ipv in de body :

Code:

<SCRIPT LANGUAGE="JavaScript" type="text/javascript">
<!--
var slide = new Array();
slide[0] = "wedding_520x548.JPG";
slide[1] = "houseplans_520x548.JPG";
slide[2] = "app_520x548.JPG";
slide[3] = "business deal_520x548.JPG";
slide[4] = "businesswoman_520x548.JPG";
slide[5] = "courthouseantwerp_520x548.JPG";
slide[6] = "business hall_520x548.JPG";

var current = 0;
function advance(){
current = (current < slide.length - 1) ? current + 1 : 0;
if(slide[current]){document.images.show.src = slide[current];
window.status='Slide '+(current+1)+' of '+slide.length+': '+slide[current];
};
};
function retract(){
current = (current > 0) ? current - 1 : slide.length - 1;
if(slide[current]){document.images.show.src = slide[current];
window.status='Slide '+(current+1)+' of '+slide.length+': '+slide[current];
};
};
var the_show = ""; 
function startShow() { 
the_show = setInterval("advance();",2000);
}; 
-->
</SCRIPT>

Om geen lege plaatjes meer te hebben en als je aan het laatste plaatje gekomen bent terug vanaf het eerste te beginnen en omgekeerd, als je aan het eerste gekomen bent weer te beginnen met het laatste heb ik het volgende veranderd :

Code:

current++;

en

Code:

current--;

in

Code:

current = (current < slide.length - 1) ? current + 1 : 0;

en

Code:

current = (current > 0) ? current - 1 : slide.length - 1;

Dit is de verkorte versie van de volgende if-else die daar ook had kunnen staan :

Code:

if (current < slide.length - 1) {
current++;
} else {
current = 0;
};

en

Code:

if (current > 0) {
current--;
} else {
current = slide.length - 1;
};

De body inclusief body-tags ziet er als volgt uit als je de slideshow op een aparte pagina zet :

Code:

<body onload="startShow();">
<div align="center">
<table width="31%" cellpadding="1" cellspacing="1" bgcolor="#663300">
<tr><td colspan="2" align="center" bgcolor="ffffcc">
<img src="bigstockphoto_Hand_Pointing_Text_On_Book_520x548blur_grad.JPG" name="show" width="520" height="548">
</td></tr>
<tr><td align="center" bgcolor="ffffcc" height=30 width="50%">
<input type=button onclick="retract();" value="vorige">
</td><td align="center" bgcolor="ffffcc" height=30 width="50%">
<input type="button" onclick="advance();" value="volgende">
</td></tr>
</table>
</div>
</body>

Dus de hele pagina ziet er als volgt uit :

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<SCRIPT LANGUAGE="JavaScript" type="text/javascript">
<!--
var slide = new Array();
slide[0] = "wedding_520x548.JPG";
slide[1] = "houseplans_520x548.JPG";
slide[2] = "app_520x548.JPG";
slide[3] = "business deal_520x548.JPG";
slide[4] = "businesswoman_520x548.JPG";
slide[5] = "courthouseantwerp_520x548.JPG";
slide[6] = "business hall_520x548.JPG";

var current = 0;
function advance(){
current = (current < slide.length - 1) ? current + 1 : 0;
if(slide[current]){document.images.show.src = slide[current];
window.status='Slide '+(current+1)+' of '+slide.length+': '+slide[current];
};
};
function retract(){
current = (current > 0) ? current - 1 : slide.length - 1;
if(slide[current]){document.images.show.src = slide[current];
window.status='Slide '+(current+1)+' of '+slide.length+': '+slide[current];
};
};
var the_show = ""; 
function startShow() { 
the_show = setInterval("advance();",2000);
}; 
-->
</SCRIPT>
</head>
<body onload="startShow();">
<div align="center">
<table width="31%" cellpadding="1" cellspacing="1" bgcolor="#663300">
<tr><td colspan="2" align="center" bgcolor="ffffcc">
<img src="bigstockphoto_Hand_Pointing_Text_On_Book_520x548blur_grad.JPG" name="show" width="520" height="548">
</td></tr>
<tr><td align="center" bgcolor="ffffcc" height=30 width="50%">
<input type=button onclick="retract();" value="vorige">
</td><td align="center" bgcolor="ffffcc" height=30 width="50%">
<input type="button" onclick="advance();" value="volgende">
</td></tr>
</table>
</div>
</body>
</html>

Hier vind je een voorbeeld met een interval van 5000 milliseconden en nog een kleine bijkomende functie

.

Greetz : Jer

en.

Redmage · 9 mei 2007

jeroen bedankt voor de info maar het lukt nog steeds niet.

Het script in de head geen probleem, maar waar in het body moet ik het deel body plaatsen.

Doe ik alles vanboven (dus script in head en onmiddellijk daarna het stuk onload van body) dan krijg ik m'n site niet meer te zien maar alleen een pagina met de foto.

Ik dacht dat het stuk body zou moeten komen waar nu m'n foto staat en dat ik die dan wegdoe dus :

<tr>
<td height="548"></td>
<td colspan="2" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">

<tr>
<td width="8" height="548"> </td>
<td width="520" valign="top"> KOMT DE TEKST HIER ???<img src="bigstockphoto_Hand_Pointing_Text_On_Book_520x548blur_grad.JPG" width="520" height="548"></td>
</tr>
</table></td>
</tr>
en dus vanaf <img src deleten tot en met </td> ?

Ook wil ik de knoppen vorige / volgende weg : het moet gewoon een slideshow zijn.

Help je even ?

Redmage · 11 mei 2007

ok heb het wat aangepast en het werkt nu al op een aparte pagina

met deze code

<html>
<head>
</script>
<SCRIPT LANGUAGE="JavaScript" type="text/javascript">

</SCRIPT>
</head>
<body>
<td height="548"></td>
<td colspan="2" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">

<tr>
<td width="8" height="548"> </td>
<td width="520" valign="top"><body onload="startShow();">
<div align="center">
<table width="31%" cellpadding="1" cellspacing="1" bgcolor="#663300">
<tr><td colspan="2" align="center" bgcolor="ffffcc">
<img src="bigstockphoto_Hand_Pointing_Text_On_Book_520x548blur_grad.JPG" name="show" width="520" height="548">
</td></tr>
</table></td>

</body>
</html>

Ik heb de knoppen weggekregen maar ik merk nog dat er vanonder precies nog een klein geel lijntje te zien is van ongeveer 3px hoog. Hoe krijg ik dit weg ?

En verder natuurlijk nog m'n eerdere vraag hoe ik dit nu in m'n bestaande pagina kan inpassen zodat de slideshow in de plaats komt van het standaard plaatje.

JeroenE · 11 mei 2007

De zaken die in het rood zijn, kan je weglaten, die in het groen moeten erbij :

Code:

<html> 
<head>
[color=red]</script>[/color]
<SCRIPT LANGUAGE="JavaScript" type="text/javascript">
<!--
var slide = new Array();
slide[0] = "wedding_520x548.JPG";
slide[1] = "houseplans_520x548.JPG";
slide[2] = "app_520x548.JPG";
slide[3] = "businessdeal_520x548.JPG";
slide[4] = "businesswoman_520x548.JPG";
slide[5] = "courthouseantwerp_520x548.JPG";
slide[6] = "businesshall_520x548.JPG";

var current = 0;
function advance(){
current = (current < slide.length - 1) ? current + 1 : 0;
if(slide[current]){document.images.show.src = slide[current];
window.status='Slide '+(current+1)+' of '+slide.length+': '+slide[current];
};
};
[color=red]function retract(){
current = (current > 0) ? current - 1 : slide.length - 1;
if(slide[current]){document.images.show.src = slide[current];
window.status='Slide '+(current+1)+' of '+slide.length+': '+slide[current];
};
};[/color]
var the_show = ""; 
function startShow() { 
the_show = setInterval("advance();",4000);
}; 
-->
</SCRIPT>
</head> 
[color=red]<body>
<td height="548"></td>
<td colspan="2" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr> 
<td width="8" height="548">&nbsp;</td>
<td width="520" valign="top">[/color]<body onload="startShow();">
<div align="center">
<table width="31%" cellpadding="1" cellspacing="1" bgcolor="#663300">
<tr><td colspan="2" align="center" bgcolor="ffffcc">
<img src="bigstockphoto_Hand_Pointing_Text_On_Book_520x548blur_grad.JPG" name="show" width="520" height="548">
</td></tr>
</table>[color=red]</td>[/color]

[color=green]</div>[/color]
</body>
</html>

Om het in te voegen op de plaats van het standaardplaatje, vervang je gewoon het plaatje door :

Code:

<img src="bigstockphoto_Hand_Pointing_Text_On_Book_520x548blur_grad.JPG" name="show" width="520" height="548">

en zet je het script in de head van je bestaande pagina :

Code:

<SCRIPT LANGUAGE="JavaScript" type="text/javascript">
<!--
var slide = new Array();
slide[0] = "wedding_520x548.JPG";
slide[1] = "houseplans_520x548.JPG";
slide[2] = "app_520x548.JPG";
slide[3] = "businessdeal_520x548.JPG";
slide[4] = "businesswoman_520x548.JPG";
slide[5] = "courthouseantwerp_520x548.JPG";
slide[6] = "businesshall_520x548.JPG";

var current = 0;
function advance(){
current = (current < slide.length - 1) ? current + 1 : 0;
if(slide[current]){document.images.show.src = slide[current];
window.status='Slide '+(current+1)+' of '+slide.length+': '+slide[current];
};
};
var the_show = ""; 
function startShow() { 
the_show = setInterval("advance();",4000);
}; 
-->
</SCRIPT>

en vervang je

Code:

<body>

door

Code:

<body onload="startShow();">

Greetz : Jer

en.

Redmage · 14 mei 2007

HET IS GELUKT

heel erg bedankt Jeroen

slideshow code waar en hoe ?

Redmage

Gebruiker

peter vazed

Meubilair

bbniels

Gebruiker

JeroenE

Terugkerende gebruiker

Redmage

Gebruiker

JeroenE

Terugkerende gebruiker

Redmage

Gebruiker

Redmage

Gebruiker

JeroenE

Terugkerende gebruiker

Redmage

Gebruiker

Nieuwste berichten

Wij waarderen jouw privacy