Doel: een zo simpel mogelijk fotoalbum. Kleine foto's die je kunt aanklikken om een grotere te zien. Bij de grote foto aanklikbare 'vorige' en 'volgende' pijlen. Eventueel onderschriften bij de kleine foto's. Probleem: werkt alleen als je site ergens staat waar PHP mogelijk is!
Voordeel van php: het 'moeilijke' stukje woont op de server, de gebruiker krijgt alleen maar relatief simpele HTML te zien. Daardoor is het eenvoudig het zaakje in alle browsers te laten werken, veel eenvoudiger dan bij gebruik van Javascript.
Bij deze php oplossing gebruik ik geen lijstjes van foto's: dat zoekt php zelf uit.
De hier genoemde bestanden in een zip file (met dummy foto's!)
zie ook: PHP en foto's
opzet
Voor ieder album is er een aparte map, met daarin wat code en twee of drie sub-mappen. Die sub-mappen heten 'groot' en 'klein', in 'groot' staan alle grote foto's. Daarvan kan je met Irfanview heel handig kleine versies maken, bijvoorbeeld allemaal 100 pixels hoog. De breedte varieert, automatisch, afhankelijk van de verhoudingen van de grote foto. Die kleintjes komen allemaal in 'klein'. Even studeren op Irfanview, gaat allemaal heel gemakkelijk en snel, als je eenmaal weet hoe.
De namen van de grote foto en van de verkleining moeten precies hetzelfde zijn! Ook wat betreft hoofd- en kleine letters: op de server gelden die als verschillend.
Desgewenst kan je nog een map 'tekst' maken. Daarin kan je bestandjes opnemen met tekst. De naam van het bestand moet precies hetzelfde zijn als de naam van de foto, behalve het achtervoegsel. Dat moet 'txt' zijn. De eerste regel uit dat bestandje wordt als onderschrift bij de kleine foto's gebruikt. Die regel en eventuele volgenden komen allemaal onder de vergroting te staan. Let op het verschil tussen <br> en 'harde return'.
Het maken van de txt bestandjes gaat het gemakkelijkst als je de kleine fototjes bekijkt met Irfanview. Maak Irfanview zo klein dat je de hele bestandsnaam nog goed kunt zien. Open NoteTab in een venster daarnaast, maak een tekstbestandje, bedenk een tekst. Sla het bestandje op met dezelfde naam als de foto, met achtervoegsel txt. Je hoeft niet voor iedere foto een tekstje te maken!
Als er een map 'tekst' bestaat dan maakt het systeem een tabel van vier kolommen. Dat is de eenvoudigste manier om de tekst onder de juiste foto te krijgen. Is er geen 'tekst' dan komen alle kleine fotootjes achter en onder elkaar, vanzelf het beschikbare scherm vullend.
Zoals gezegd is er voor ieder album een aparte map. Die staan samen in een overkoepelende map, waarin ook nog wat code staat. Pas desgewenst de stylesheet aan!
Dit is de overkoepelende map, er blijken 4 albums te zijn.
Het album 'paard' heeft geen onderschriften bij de foto's. Er zijn twee bestandjes met code:
<html> <LINK REL="stylesheet" TYPE="text/css" HREF="../fotoalbum.css"> <body><center> <div class="tx"> <h1>Paardjes</h1> <?php include "../album.php"; ?> </div></center></body></html>
<html> <LINK REL="stylesheet" TYPE="text/css" HREF="../fotoalbum.css"> <body><center> <div class="tx"> <?php include "../album2.php"; ?> </div></center></body></html>
In het eerste bestand, photo.php, moet de <h1>header</h1> worden aangepast. In het tweede bestand, photo2.php, moet niets veranderd worden. Verder zijn deze twee bestanden identiek in ieder album. Er worden twee bestanden ingevoegd, die in de hoofdmap staan: album.php en album2.php. Hier is de langste, album.php:
<font size=1>klik een foto voor een vergroting!</font><br>
<SCRIPT src="../fullscreen.js"></script>
<?php
$mini = "klein/";
$text = "tekst/";
$fp = opendir("$mini");
while ($file = readdir($fp))
if ($file != "." && $file != "..") $fotos[] = $file;
closedir($fp);
$tel = count($fotos);
// sorteren:
for($i = 0; $i<($tel-1); $i++)
for($j = $i + 1; $j<$tel; $j++)
if($fotos[$i]>$fotos[$j]){
$t = $fotos[$i];
$fotos[$i] = $fotos[$j];
$fotos[$j] = $t;
}
$x = 0;
if(file_exists($text)){ // maak table als er tekst is
echo '<table>';
for ($i = 0; $i < $tel; $i++){
if($x==0)echo '<tr>';
echo '<td>';
echo '<a href="javascript:void(0);" onClick=fullscreen("photo2.php?x='.$i.'")>';
echo '<img src="'.$mini.$fotos[$i].'"></a>';
// als tekst/naam.txt bestaat, stop die in tkstn[], anders spatie
$tkst = $text.substr_replace($fotos[$i],'txt',-3);
if(file_exists($tkst)){
$fp = fopen($tkst,"r");
$tkstn[$x] = fgets($fp);
fclose($fp);
}
else $tkstn[$x] =" ";
if(++$x==4){
echo '<tr>';
for($j = 0; $j<4; $j++) echo '<td>'.$tkstn[$j];
$x = 0;
}
}
if($x>0){ // als laatste regel <4
echo '<tr>';
for($j = 0; $j<$x; $j++)echo '<td>'.$tkstn[$j];
}
echo '</table>';
}
else{ // maak geen table als er geen tekst is
for ($i = 0; $i < $tel; $i++){
echo '<a href="javascript:void(0);" onClick=fullscreen("photo2.php?x='.$i.'")>';
echo '<img src="'.$mini.$fotos[$i].'"></a>';
}
}
?>
<br><input type="BUTTON" value="" onclick="window.close()">
en hier is album2.php:
<?php
$maxi = "groot/";
$text = "tekst/";
$fp = opendir("$maxi");
while ($file = readdir($fp))
if ($file != "." && $file != "..") $fotos[] = $file;
closedir($fp);
$tel = count($fotos);
$p = (isset($_GET['x']))? $_GET['x'] : '';
if($p<0)$p=$tel-1;
else if($p>($tel-1))$p=0;
$i = $p-1;
echo '<a href="photo2.php?x='.$i.'"><IMG SRC="../pijllinks.gif"></a>';
echo '<input type="button" value="" onclick="window.close()"> ';
$i = $p+1;
echo '<a href="photo2.php?x='.$i.'"><IMG SRC="../pijlrechts.gif"></a>';
echo '<br>';
// sorteren:
for($i = 0; $i<($tel-1); $i++)
for($j = $i + 1; $j<$tel; $j++)
if($fotos[$i]>$fotos[$j]){
$t = $fotos[$i];
$fotos[$i] = $fotos[$j];
$fotos[$j] = $t;
}
echo '<IMG SRC="'.$maxi.$fotos[$p].'">';
// als tekst/naam.txt bestaat, maak onderschrift
$tkst = $text.substr_replace($fotos[$p],'txt',-3);
if(file_exists($tkst)){
echo '<br><br>';
$fp = fopen($tkst,"r");
do{
$t = fgets($fp);
echo $t;
}while($t>"");
fclose($fp);
}
?>
In album.php en album2.php hoef je niets te veranderen!
Dan zijn er nog de albums met onderschriften:
Merk op dat er een map 'tekst' is. De drie mappen bevatten:
Van de vijf foto's hebben er vier een onderschrift. Pas op: sommige beeldbewerkingsprogramma's hebben hun eigen ideeën over hoofd- en kleine letters. Dat veroorzaakte img naast IMG.
Het bestand fotoalbum.css bevat de 'stijl' van het album. Verander desgewenst kleuren of lettertype. Verander of verplaats de overige bestanden niet, tenzij je weet wat je doet!