Ik heb een scriptje met Javascript waarbij met behulp van een onmouseover de grote foto het zelfde wordt als de kleine foto. Nu wil ik dit scriptje in PHP inbouwen. Het PHP script leest de directory uit en zet alle foto's in een tabel. Nu wil ik net als in het scriptje met Javascript het zo maken dat ook weer dat je op de kleine foto gaat staan ook weer de grote foto veranderd. Weten jullie hoe dit moet?
Het gaat om het volgende javascript stukje:
<SCRIPT language="JavaScript">
function foto(x) {
document.images.photoslider.src = x;
}
</SCRIPT>
<img src="0001.jpg" width="100" border="0" onmouseover="javascript:foto('0001.jpg')" />
<img src="0001.jpg" name="photoslider" border="0">
En om het volgende PHP script.
Het gaat om het volgende javascript stukje:
<SCRIPT language="JavaScript">
function foto(x) {
document.images.photoslider.src = x;
}
</SCRIPT>
<img src="0001.jpg" width="100" border="0" onmouseover="javascript:foto('0001.jpg')" />
<img src="0001.jpg" name="photoslider" border="0">
En om het volgende PHP script.
PHP:
<head>
<?php
$dir = "foto/"; //Dir die uitgelezen moet worden. vergeet / NIET !!!
//inhoud van de directory ophalen
$handle = opendir($dir);
while ($file = readdir($handle))
{
if($file == '.' || $file == '..')
continue;
else
$result_array[]=$file;
}
closedir($handle);
array_multisort($result_array, SORT_DESC);
?>
<SCRIPT language="JavaScript">
function foto(x) {
document.images.photoslider.src = x;
}
</SCRIPT>
<link rel="stylesheet" href="stijlenfoto.css">
</head>
<body>
<?php
$rows = 1;
$cols = 6;
//pagina nummer ophalen, indien geen pagina nummer op 0 zetten
if(isset($_GET['page']))
{
$page = $_GET['page'];
}
else
{
$page = 0;
}
//totaal aantal foto's, om het aantal pagina's uit te rekenen
$num_pics = count($result_array);
//wat vars en andere rommel om de juiste pagina's en array's door te lopen
$cells = $rows * $cols;
$pages = ceil($num_pics / ($rows * $cols));
$num_pages = $pages - 1;
$output = array();
$slices = array();
$push = 0;
$showpage = $page + 1;
//array vullen met waarden voor de slice om afbeeldingen per pagina weer te geven
for($k=0;$k<$pages;$k++)
{
array_push($slices, $push);
$push = $push + $cells;
}
//lusje om te kijken op welke pagina we zijn en vervolgens de goede set afbeeldingen uit $result_array halen
for($k=0;$k<$pages;$k++)
{
if($page == key($slices))
{
$output = array_slice($result_array, current($slices), $cells);
}
next($slices);
}
reset($output);
//afbeelden van afbeeldingen
print "<center>\n<table width='*' border='1' bordercolor='#000000' cellspacing='0' cellpadding='2'>\n";
for($i=0;$i<$rows;$i++)
{
print "\t<tr>\n";
for($j=0;$j<$cols;$j++)
{
if(current($output) != false)
{
$pic = current($output);
$size = getimagesize($dir.$pic);
$height_button = $size[1] + 70;
$value = current($output);
print "\t\t<td width='100' align=center>\n\t\t\t\n\t\t\t\t<img width='100' border='0' src='$dir$value' onmouseover='javascript:foto('$dir$value')'>\n\t\t\t\n\t\t</td>\n\n";
next($output);
}
else
{
print "\t\t<td width='100' align='center'> </td>\n";
}
}
}
//hier worden de prev en next knopjes gemaakt.
$ref = $_SERVER['PHP_SELF'];
print "</table>\n";
if($num_pages == '0')
{
print "<span>[ </span>";
print "vorige";
print "<span> ] </span>";
print "<span> [ </span>";
print "volgende";
print "<span> ]</span>";
}
elseif(($page == '0')||($page == ''))
{
// geen previous knopje, begin pagina index.php?page=0
$next = $page + 1;
print "<span>[ </span>";
print "vorige";
print "<span> ] </span>";
$page_link = 1;
for($k=0;$k<$pages;$k++)
{
if($k == $page)
{
print "$page_link ";
}
else
{
print "<a href='$ref?page=$k'>$page_link</a> ";
}
$page_link++;
}
print "<span> [ </span>";
print "<a href='$ref?page=$next'>volgende</a>";
print "<span> ]</span>";
}
elseif($page == $num_pages)
{
// geen next knopje, $pages = maximum
$prev = $page - 1;
print "<span>[ </span>";
print "<a href='$ref?page=$prev'>vorige</a>";
print "<span> ] </span>";
$page_link = 1;
for($k=0;$k<$pages;$k++)
{
if($k == $page)
{
print "$page_link ";
}
else
{
print "<a href='$ref?page=$k'>$page_link</a> ";
}
$page_link++;
}
print "<span> [ </span>";
print "volgende";
print "<span> ]</span>";
}
else
{
// de rest, pagina's in het midden, 2 knopjes
$next = $page + 1;
$prev = $page - 1;
print "<span>[ </span>";
print "<a href='$ref?page=$prev'>vorige</a>";
print "<span> ] </span>";
$page_link = 1;
for($k=0;$k<$pages;$k++)
{
if($k == $page)
{
print "$page_link ";
}
else
{
print "<a href='$ref?page=$k'>$page_link</a> ";
}
$page_link++;
}
print "<span> [ </span>";
print "<a href='$ref?page=$next'>volgende</a>";
print "<span> ]</span>";
}
//pagina nummer afbeelden, dit kan je er nog uit slopen of ergens anders neerkwakken
print "<br><br>";
print "<p>Pagina: $showpage van $pages</p>";
?>
</center>
<table>
<tr><td>
<?php
print "<img src= '$dir$value' name='photoslider' width='640'/>";
?>
</td></tr></table>
</body>
</html>