AngelLibby
Gebruiker
- Lid geworden
- 12 dec 2007
- Berichten
- 13
Hoi,
Ik wil op een website een soort van "slideshow" plaatsen maar dan zonder dat het zelf beweegt enzo. Ik wil alleen 2 knoppen hebben om van foto te wisselen (Next en Previous).
Nu heb een al gezocht naar scripts daarvoor en ik heb een goede gevonden:
http://javascript.internet.com/image-effects/next-previous-image-gallery.html#
Ik heb alle instructies opgevolgd maar hij werkt niet. Zou iemand me kunnen vertellen wat er niet klopt aan dit script?
PS: Ik ben geen scripter
Scriptbestand:
Mijn HTML pagina:
Ik wil op een website een soort van "slideshow" plaatsen maar dan zonder dat het zelf beweegt enzo. Ik wil alleen 2 knoppen hebben om van foto te wisselen (Next en Previous).
Nu heb een al gezocht naar scripts daarvoor en ik heb een goede gevonden:
http://javascript.internet.com/image-effects/next-previous-image-gallery.html#
Ik heb alle instructies opgevolgd maar hij werkt niet. Zou iemand me kunnen vertellen wat er niet klopt aan dit script?
PS: Ik ben geen scripter
Scriptbestand:
PHP:
<!-- Paste this code into an external JavaScript file named: nextPrevious.js -->
// List image names without extension
var myImg= new Array(3)
myImg[0]= "foto1";
myImg[1]= "foto2";
myImg[2]= "logo";
myImg[3]= "thumb-1";
// Tell browser where to find the image
myImgSrc = "images";
// Tell browser the type of file
myImgEnd = ".jpg"
var i = 0;
// Create function to load image
function loadImg(){
document.imgSrc.src = myImgSrc + myImg[i] + myImgEnd;
}
// Create link function to switch image backward
function prev(){
if(i<1){
var l = i
} else {
var l = i-=1;
}
document.imgSrc.src = myImgSrc + myImg[l] + myImgEnd;
}
// Create link function to switch image forward
function next(){
if(i>2){
var l = i
} else {
var l = i+=1;
}
document.imgSrc.src = myImgSrc + myImg[l] + myImgEnd;
}
// Load function after page loads
window.onload=loadImg;
<!-- Paste this code into the HEAD section of your HTML document.
You may need to change the path of the file. -->
<script type="text/javascript" src="nextprevious.js"></script>
<!-- Paste this code into the BODY section of your HTML document -->
<div style="width:400px; height:300px; margin: auto;">
<img name="imgSrc" id="imgSrc">
</div>
<!-- Controller -->
<table width="400" border="0" cellspacing="0" cellpadding="0" style="border:1px solid #000000; width:400px; margin: auto;">
<tr>
<td align="center"><a href="#" onClick="prev();"> «</a></td>
<td align="center"><a href="#" onClick="next();"> » </a></td>
</tr>
</table>
<p><div align="center">
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</div><p>Mijn HTML pagina:
PHP:
<!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=utf-8" />
<title>Bouwkundig Buro van Westen</title>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<script type="text/javascript" src="nextprevious.js"></script>
<style type="text/css">
<!--
.style1 { font-family: Arial, Helvetica, sans-serif
}
.style5 {color: #939598}
.style7 {
color: #949599;
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
.style8 { font-size: 16px;
font-weight: bold;
}
.style12 {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #949599;
}
body {
margin-left: 0px;
margin-top: 50px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #FFFFFF;
}
.style13 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #949599;
}
.style14 {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #949599;
}
.style15 {color: #949599}
a:link {
color: #949599;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #949599;
}
a:hover {
text-decoration: underline;
color: #949599;
}
a:active {
text-decoration: none;
color: #949599;
}
.style17 {font-family: Arial, Helvetica, sans-serif; font-size: 12px; }
.style20 {color: #FFFFFF}
.style23 {
color: #FFFFFF;
font-size: 14px;
}
.style25 {font-size: 14px}
#apDiv1 {
position:absolute;
width:200px;
height:29px;
z-index:1;
left: 770px;
top: 83px;
visibility: visible;
overflow: visible;
}
-->
</style>
</head>
<body>
<table width="900" height="649" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td height="41" colspan="3" align="left" valign="top">
<img src="img/logo.jpg" width="230" height="41" /></td>
<td colspan="2" bgcolor="#949599"> </td>
</tr>
<tr>
<td width="195" height="21"> </td>
<td width="31"> </td>
<td width="4"> </td>
<td width="490"> </td>
<td width="180"> </td>
</tr>
<tr>
<td height="39"> </td>
<td rowspan="5"> </td>
<td rowspan="6" background="img/line.jpg" bgcolor="#19539D"> </td>
<td rowspan="5" align="center" valign="top"><table width="470" height="541" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="466" height="550" align="left" valign="top"><p class="style14">Welkom</p>
<div style="width:400px; height:300px; margin: auto;">
<img name="imgSrc" id="imgSrc">
</div>
<!-- Controller -->
<table width="400" border="0" cellspacing="0" cellpadding="0" style="border:1px solid #000000; width:400px; margin: auto;">
<tr>
<td align="center"><a href="#" onClick="prev();"> «</a></td>
<td align="center"><a href="#" onClick="next();"> » </a></td>
</tr>
</table>
<p> </p>
</td>
</tr>
</table></td>
<td> </td>
</tr>
<tr>
<td height="315" align="right" valign="top"><p align="right" class="style1"><span class="style8"><span class="style5"><span class="style15"><a href="index.html" target="_parent"><br />
Startpagina</a></span></span></span></p>
<p align="right" class="style7"><a href="pages/nieuwbouw.html" target="_parent">Nieuwbouw</a></p>
<p align="right" class="style7"><a href="pages/verbouw.html" target="_parent">Verbouw</a></p>
<p align="right" class="style7"><a href="pages/overzichtwerken.html" target="_parent">Overzicht van werken</a></p>
<p align="right" class="style7"><a href="pages/contact.html" target="_parent">Contact</a></p></td>
<td align="center" valign="middle" bgcolor="#949599"><img src="img/foto1.jpg" width="176" height="311" /></td>
</tr>
<tr>
<td> </td>
<td height="19"> </td>
</tr>
<tr>
<td height="150" align="center" valign="middle" bgcolor="#18549D">
<a href="images/foto2.jpg" rel="lightbox"><img src="images/foto2.jpg" alt="" width="191" height="146" border="0" align="middle" /></a>
<td rowspan="2" align="center" valign="middle" background="img/bgnews.jpg"><table width="165" height="164" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="165" height="162" align="center" valign="top" class="style17"><span class="style23">- Nieuws -</span><span class="style25"><br />
</span><span class="style20"><br />
Suspendisse potenti. Praesent aliquam lectus id nulla. Vivamus gravida tortor eu ipsum imperdiet tristique. Donec lacinia lacus et enim. Sed at pede lobortis pede placerat dapibus. </span><br /> </td>
</tr>
</table></td>
</tr>
<tr>
<td height="30" bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<td height="19" colspan="2" background="img/bottom.jpg"> </td>
<td colspan="2" background="img/bottom.jpg"> </td>
</tr>
<tr>
<td height="15" colspan="5" bgcolor="#FFFFFF"><span class="style12">© 2007 BBVW - vormgeving en realisatie: Buro19</span></td>
</tr>
</table>
</body>
</html>
