Tutorials
Dynamisch fotoalbum
Dynamisch fotoalbum
Pagina 1
De variabelen
All,
Dit is een tutorial van hoe je een dynamisch fotoalbum kan maken. Ideaal voor beginners om enkele functies te leren gebruiken in PHP.
Je kan er volgende dingen in aanpassen:
- De maximale hoogte/breedte van de weergave van je foto
- Uiteraard het aantal fotos
- de schaal van je thumbnails
- het aantal fotos op een rij
Genoeg info, nu de realiteit ...
We beginnen met de variabelen vast te leggen. Deze variabelen zetten we in een apart bestand, zodanig dat we ze in alle andere files kunnen gebruiken, waar nodig. Ik sla het bestand op als fotoboek_vars.php
<?php
// instellingen voor het fotoboek
$aantal_per_rij = 3; // stel het aantal fotos per rij in
$aantal_fotos = 5; // stel het aantal fotos in. Elke keer als je een foto bijzet, verhoog je dit met 1
$max_hoogte = 800; // zet de maximale hoogte en/of breedte van een foto in pixels (maximale origineel formaat van de foto is hier 800 X 600)
$max_breedte = 600; // zet de maximale hoogte en/of breedte van een foto in pixels (maximale origineel formaat van de foto is hier 800 X 600)
$schaal = 5; // Deelt de maximale grootte door deze factor voor de tumbnails
$foto_dir = "fotos/"; // hiermee bepaal je de directory van je fotos
?>
Dit is een tutorial van hoe je een dynamisch fotoalbum kan maken. Ideaal voor beginners om enkele functies te leren gebruiken in PHP.
Je kan er volgende dingen in aanpassen:
- De maximale hoogte/breedte van de weergave van je foto
- Uiteraard het aantal fotos
- de schaal van je thumbnails
- het aantal fotos op een rij
Genoeg info, nu de realiteit ...
We beginnen met de variabelen vast te leggen. Deze variabelen zetten we in een apart bestand, zodanig dat we ze in alle andere files kunnen gebruiken, waar nodig. Ik sla het bestand op als fotoboek_vars.php
<?php
// instellingen voor het fotoboek
$aantal_per_rij = 3; // stel het aantal fotos per rij in
$aantal_fotos = 5; // stel het aantal fotos in. Elke keer als je een foto bijzet, verhoog je dit met 1
$max_hoogte = 800; // zet de maximale hoogte en/of breedte van een foto in pixels (maximale origineel formaat van de foto is hier 800 X 600)
$max_breedte = 600; // zet de maximale hoogte en/of breedte van een foto in pixels (maximale origineel formaat van de foto is hier 800 X 600)
$schaal = 5; // Deelt de maximale grootte door deze factor voor de tumbnails
$foto_dir = "fotos/"; // hiermee bepaal je de directory van je fotos
?>
Pagina 2
de album met de kleine fotos
Nadat we de variabelen hebben kunnen we vertrekken met het album samen te stellen. We moeten met een aantal dingen rekening houden:
- De fotos kunnen van alle formaten zijn, dus moeten we een standaardformaat hanteren. Dit formaat is gedefinieerd in de file met de variabelen (in dit voorbeeld 600 x 800 of 800 x 600). Dit is de ware groote van de foto. Indien de foto een exotisch formaat heeft (1256 * 854), gaan we deze eerst naar het maximum formaat berekenen. De foto wordt dan via HTML "geresized".
- Als je de foto in de hoogte (via HTML) verkleint of vergroot, dien je deze in dezelfde mate te verkleinen of te vergroten in de breedte, wat een wiskundige berekening vereist.
Nu komt de samenstelling van het script:
In eerste instantie hebben we onze variabelen nodig.
<?php include("fotoboek_vars.php"); ?>
We beginnen met een tabel om de fotos in te steken.
<table>
We hebben nu een teller nodig om te delen door het aantal fotos per rij.
<?php $teller = 0; ?>
Nu maken we een for-lus voor het aantal fotos te doorlopen.
<?php
for ($foto_id = 1; $foto_id <= $aantal_fotos; $foto_id++){
}
?>
In deze lus moeten we een aantal zaken voorzien wat er moet gebeuren.
- In eerste instantie moeten we de teller met 1 verhogen om de plaats te bepalen van de foto, afhankelijk van hoeveel fotos per rij we wensen. Later meer hierover.
<?php $teller++; ?>
- Ten tweede moeten we de file definiëren waar de file staat. Het directory hebben we gedefinieerd in de file met de variabelen, de file zelf definiëren we hier:
<?php $file_foto = $foto_dir."foto".$foto_id.".jpg"; ?>
Ik gebruik de extentie JPG (de meest gangbare voor fotos van een digitale camera), maar je kan er dus andere formaten ook mee lezen als je de extensie hier aanpast.
Nu beginnen we aan de formaatwijziging, indien deze nodig zou zijn.
- We halen de breedte en de hoogte van de foto op door de functie getimagesize. Deze functie geeft een array terug met eerst de breedte, dan de hoogte van het opgegeven bestand. Je kan dan hoogte en breedte nadien apart in een variabele steken:
<?php
$dimensions = getimagesize($file_foto);
$bronbreedte = $dimensions[0];
$bronhoogte = $dimensions[1];
?>
- Nu beginnen we te verkleinen. Het maximumformaat in dit voorbeeld is 800*600 of 600*800. In het script is dit niet te zien, omdat we de variabelen gebruiken uit de file met de variabelen.
In de eerste if structuur gaan we na of de hoogte en/of de breedte groter is dan de grootte die is opgegeven. Indien dit niet het geval is, blijft het formaat zoals het is. Indien dit wel het geval is, dienen we de foto te verkleinen.
<?php
if (($bronhoogte > $max_hoogte) or ($bronbreedte > $max_hoogte)){
if ($bronhoogte < $bronbreedte){ // de hoogte van de foto is kleiner dan de breedte
$fotobreedte = $max_hoogte;
$fotohoogte = ($bronhoogte *$max_hoogte)/$bronbreedte;
if ($fotohoogte > $max_breedte){
$fotohoogte = $max_breedte;
$fotobreedte = ($bronbreedte * $max_breedte) / $bronhoogte;
}
}
if ($bronhoogte > $bronbreedte){ // de hoogte van de foto is groter dan de breedte
$fotohoogte = $max_hoogte;
$fotobreedte = ($bronbreedte *$max_hoogte) / $bronhoogte;
if ($fotobreedte > $max_breedte){
$fotobreedte = $max_breedte;
$fotohoogte = ($bronhoogte * $max_breedte) / $bronbreedte;
}
}
// als de foto vierkantig is
if ($bronhoogte == $bronbreedte){
$fotohoogte = $max_breedte;
$fotobreedte = $max_breedte;
}
}else{
$fotohoogte = $bronhoogte;
$fotobreedte = $bronbreedte;
}
?>
Kleine verduidelijking aan de hand van een voorbeeld:
We hebben een foto van 789 x 1549. De maximumhoogte en -breedte staan ingesteld op 800. De hoogte is dus groter dan de breedte. De fotohoogte wordt dus het maximumhoogte van 800px. Hier hebben we de foto verkleind van 1549 naar 800px. Nu moeten we de breedte in dezelfde mate verkleinen.
De breedte van de foto wordt dan de bronbreedte van de foto 789px naar X. Dit is een wiskundige regel van 3:
1549 -> 800
1 -> 800/1549
789 -> (800*789)/1549 = 407,488702...-> dit wordt dus onze fotobreedte.
Aangezien het niet raadzaam is om met floating points in HTML te werken, gaan we hier een afronding invoeren. Dit doe je als volgt:
<?php $fotohoogte = round(($fotohoogte/$schaal),0); ?>
Nu we het juiste formaat hebben van de foto, kunnen we onze fotos klasseren in de tabel. Hier ga je ook de betekenis van de teller zien. Indien de modus van de deling van de teller met het aantal per rij gelijk is aan 1, moet er een TR geopend worden, als deze gelijk is aan 0 moet deze gesloten worden. In de andere gevallen moet gewoon een TD geopend en gesloten worden.
<?php
if (($teller % $aantal_per_rij) == 1){
echo "<tr>\n<td align='center' valign='middle'><img src='".$file_foto."' height='".round(($fotohoogte/$schaal),0)."' width='".round(($fotobreedte/$schaal),0)."' alt='foto ".$foto_id."' onClick=\"BrowserWindow('foto_temp.php?foto=".$foto_id."','foto','scrollbars=yes')\"></td>\n";
}elseif (($teller % $aantal_per_rij) == 0){
echo "<td align='center' valign='middle'><img src='".$file_foto."' height='".round(($fotohoogte/$schaal),0)."' width='".round(($fotobreedte/$schaal),0)."' alt='foto ".$foto_id."' onClick=\"BrowserWindow('foto_temp.php?foto=".$foto_id."','foto','scrollbars=yes')\"></td></tr>\n";
}else{
echo "<td align='center' valign='middle'><img src='".$file_foto."' height='".round(($fotohoogte/$schaal),0)."' width='".round(($fotobreedte/$schaal),0)."' alt='foto ".$foto_id."' onClick=\"BrowserWindow('foto_temp.php?foto=".$foto_id."','foto','scrollbars=yes')\"></td>\n";
}
?>
Je merkt hier ook dat er nog wat javascript tussen staat om de foto in het groot te openen. Hieronder vind je dit scriptje.
Nu zijn we nog een dingetje vergeten. Wat indien je maar 3 fotos hebt en je hebt 4 fotos op een rij. Dan heb je het volgende scenario als broncode.
Dit is dus niet de bedoeling want de overige boxen moeten ook opgevuld worden en de TR moet afgesloten worden. Om dit te voorkomen, gaan we volgende code invoegen:
<?php
for ($i = 0; $i <= ($aantal_per_rij-1); $i++){
if (($teller >= $aantal_fotos) and (($teller % $aantal_per_rij) != 0)){
$teller++;
echo "<td></td>\n";
}elseif (($teller >= $aantal_fotos) and (($teller % $aantal_per_rij) == 0)){
echo "</tr>\n";
break;
}else{
echo "<td></td></tr>\n";
}
}
?>
Dit is een lus die je net zolang laat doorlopen om een TD te genereren tot er vakjes moeten gevuld worden. In het geval van hierboven, wordt er 1 TD aangemaakt en wordt er afgesloten met een TR.
Buiten de lussen sluiten nu ook de tabel af:
</table>
Het script in zijn volledigheid:
Dit bestand heb ik opgeslagen als fotoboek_temp.php
- De fotos kunnen van alle formaten zijn, dus moeten we een standaardformaat hanteren. Dit formaat is gedefinieerd in de file met de variabelen (in dit voorbeeld 600 x 800 of 800 x 600). Dit is de ware groote van de foto. Indien de foto een exotisch formaat heeft (1256 * 854), gaan we deze eerst naar het maximum formaat berekenen. De foto wordt dan via HTML "geresized".
- Als je de foto in de hoogte (via HTML) verkleint of vergroot, dien je deze in dezelfde mate te verkleinen of te vergroten in de breedte, wat een wiskundige berekening vereist.
Nu komt de samenstelling van het script:
In eerste instantie hebben we onze variabelen nodig.
<?php include("fotoboek_vars.php"); ?>
We beginnen met een tabel om de fotos in te steken.
<table>
We hebben nu een teller nodig om te delen door het aantal fotos per rij.
<?php $teller = 0; ?>
Nu maken we een for-lus voor het aantal fotos te doorlopen.
<?php
for ($foto_id = 1; $foto_id <= $aantal_fotos; $foto_id++){
}
?>
In deze lus moeten we een aantal zaken voorzien wat er moet gebeuren.
- In eerste instantie moeten we de teller met 1 verhogen om de plaats te bepalen van de foto, afhankelijk van hoeveel fotos per rij we wensen. Later meer hierover.
<?php $teller++; ?>
- Ten tweede moeten we de file definiëren waar de file staat. Het directory hebben we gedefinieerd in de file met de variabelen, de file zelf definiëren we hier:
<?php $file_foto = $foto_dir."foto".$foto_id.".jpg"; ?>
Ik gebruik de extentie JPG (de meest gangbare voor fotos van een digitale camera), maar je kan er dus andere formaten ook mee lezen als je de extensie hier aanpast.
Nu beginnen we aan de formaatwijziging, indien deze nodig zou zijn.
- We halen de breedte en de hoogte van de foto op door de functie getimagesize. Deze functie geeft een array terug met eerst de breedte, dan de hoogte van het opgegeven bestand. Je kan dan hoogte en breedte nadien apart in een variabele steken:
<?php
$dimensions = getimagesize($file_foto);
$bronbreedte = $dimensions[0];
$bronhoogte = $dimensions[1];
?>
- Nu beginnen we te verkleinen. Het maximumformaat in dit voorbeeld is 800*600 of 600*800. In het script is dit niet te zien, omdat we de variabelen gebruiken uit de file met de variabelen.
In de eerste if structuur gaan we na of de hoogte en/of de breedte groter is dan de grootte die is opgegeven. Indien dit niet het geval is, blijft het formaat zoals het is. Indien dit wel het geval is, dienen we de foto te verkleinen.
<?php
if (($bronhoogte > $max_hoogte) or ($bronbreedte > $max_hoogte)){
if ($bronhoogte < $bronbreedte){ // de hoogte van de foto is kleiner dan de breedte
$fotobreedte = $max_hoogte;
$fotohoogte = ($bronhoogte *$max_hoogte)/$bronbreedte;
if ($fotohoogte > $max_breedte){
$fotohoogte = $max_breedte;
$fotobreedte = ($bronbreedte * $max_breedte) / $bronhoogte;
}
}
if ($bronhoogte > $bronbreedte){ // de hoogte van de foto is groter dan de breedte
$fotohoogte = $max_hoogte;
$fotobreedte = ($bronbreedte *$max_hoogte) / $bronhoogte;
if ($fotobreedte > $max_breedte){
$fotobreedte = $max_breedte;
$fotohoogte = ($bronhoogte * $max_breedte) / $bronbreedte;
}
}
// als de foto vierkantig is
if ($bronhoogte == $bronbreedte){
$fotohoogte = $max_breedte;
$fotobreedte = $max_breedte;
}
}else{
$fotohoogte = $bronhoogte;
$fotobreedte = $bronbreedte;
}
?>
Kleine verduidelijking aan de hand van een voorbeeld:
We hebben een foto van 789 x 1549. De maximumhoogte en -breedte staan ingesteld op 800. De hoogte is dus groter dan de breedte. De fotohoogte wordt dus het maximumhoogte van 800px. Hier hebben we de foto verkleind van 1549 naar 800px. Nu moeten we de breedte in dezelfde mate verkleinen.
De breedte van de foto wordt dan de bronbreedte van de foto 789px naar X. Dit is een wiskundige regel van 3:
1549 -> 800
1 -> 800/1549
789 -> (800*789)/1549 = 407,488702...-> dit wordt dus onze fotobreedte.
Aangezien het niet raadzaam is om met floating points in HTML te werken, gaan we hier een afronding invoeren. Dit doe je als volgt:
<?php $fotohoogte = round(($fotohoogte/$schaal),0); ?>
Nu we het juiste formaat hebben van de foto, kunnen we onze fotos klasseren in de tabel. Hier ga je ook de betekenis van de teller zien. Indien de modus van de deling van de teller met het aantal per rij gelijk is aan 1, moet er een TR geopend worden, als deze gelijk is aan 0 moet deze gesloten worden. In de andere gevallen moet gewoon een TD geopend en gesloten worden.
<?php
if (($teller % $aantal_per_rij) == 1){
echo "<tr>\n<td align='center' valign='middle'><img src='".$file_foto."' height='".round(($fotohoogte/$schaal),0)."' width='".round(($fotobreedte/$schaal),0)."' alt='foto ".$foto_id."' onClick=\"BrowserWindow('foto_temp.php?foto=".$foto_id."','foto','scrollbars=yes')\"></td>\n";
}elseif (($teller % $aantal_per_rij) == 0){
echo "<td align='center' valign='middle'><img src='".$file_foto."' height='".round(($fotohoogte/$schaal),0)."' width='".round(($fotobreedte/$schaal),0)."' alt='foto ".$foto_id."' onClick=\"BrowserWindow('foto_temp.php?foto=".$foto_id."','foto','scrollbars=yes')\"></td></tr>\n";
}else{
echo "<td align='center' valign='middle'><img src='".$file_foto."' height='".round(($fotohoogte/$schaal),0)."' width='".round(($fotobreedte/$schaal),0)."' alt='foto ".$foto_id."' onClick=\"BrowserWindow('foto_temp.php?foto=".$foto_id."','foto','scrollbars=yes')\"></td>\n";
}
?>
Je merkt hier ook dat er nog wat javascript tussen staat om de foto in het groot te openen. Hieronder vind je dit scriptje.
<script type="text/javascript">
<!--
function BrowserWindow(url,winName,features) {
window.open(url,winName,features);
}
//-->
</script>
Nu zijn we nog een dingetje vergeten. Wat indien je maar 3 fotos hebt en je hebt 4 fotos op een rij. Dan heb je het volgende scenario als broncode.
<table>
<tr>
<td>foto1</td>
<td>foto2</td>
<td>foto3</td>
</table>
Dit is dus niet de bedoeling want de overige boxen moeten ook opgevuld worden en de TR moet afgesloten worden. Om dit te voorkomen, gaan we volgende code invoegen:
<?php
for ($i = 0; $i <= ($aantal_per_rij-1); $i++){
if (($teller >= $aantal_fotos) and (($teller % $aantal_per_rij) != 0)){
$teller++;
echo "<td></td>\n";
}elseif (($teller >= $aantal_fotos) and (($teller % $aantal_per_rij) == 0)){
echo "</tr>\n";
break;
}else{
echo "<td></td></tr>\n";
}
}
?>
Dit is een lus die je net zolang laat doorlopen om een TD te genereren tot er vakjes moeten gevuld worden. In het geval van hierboven, wordt er 1 TD aangemaakt en wordt er afgesloten met een TR.
Buiten de lussen sluiten nu ook de tabel af:
</table>
Het script in zijn volledigheid:
<?php include("fotoboek_vars.php"); ?>
<script type="text/javascript">
<!--
function BrowserWindow(url,winName,features) {
window.open(url,winName,features);
}
//-->
</script>
<?php
echo "<table>\n";
$teller = 0;
for ($foto_id = 1; $foto_id <= $aantal_fotos; $foto_id++){
$teller++;
$file_foto = $foto_dir."foto".$foto_id.".jpg";
// haal de hoogte en de breedte op van de image
$dimensions = getimagesize($file_foto);
$bronbreedte = $dimensions[0];
$bronhoogte = $dimensions[1];
if (($bronhoogte > $max_hoogte) or ($bronbreedte > $max_hoogte)){
if ($bronhoogte < $bronbreedte){
$fotobreedte = $max_hoogte;
$fotohoogte = ($bronhoogte *$max_hoogte)/$bronbreedte;
if ($fotohoogte > $max_breedte){
$fotohoogte = $max_breedte;
$fotobreedte = ($bronbreedte * $max_breedte) / $bronhoogte;
}
}
if ($bronhoogte > $bronbreedte){
$fotohoogte = $max_hoogte;
$fotobreedte = ($bronbreedte *$max_hoogte) / $bronhoogte;
if ($fotobreedte > $max_breedte){
$fotobreedte = $max_breedte;
$fotohoogte = ($bronhoogte * $max_breedte) / $bronbreedte;
}
}
// als de foto vierkantig is
if ($bronhoogte == $bronbreedte){
$fotohoogte = $max_breedte;
$fotobreedte = $max_breedte;
}
}else{
$fotohoogte = $bronhoogte;
$fotobreedte = $bronbreedte;
}
// stel de rijen samen
if (($teller % $aantal_per_rij) == 1){
echo "<tr>\n<td align='center' valign='middle'><img src='".$file_foto."' height='".round(($fotohoogte/$schaal),0)."' width='".round(($fotobreedte/$schaal),0)."' alt='foto ".$foto_id."' onClick=\"BrowserWindow('foto_temp.php?foto=".$foto_id."','foto','scrollbars=yes')\"></td>\n";
}elseif (($teller % $aantal_per_rij) == 0){
echo "<td align='center' valign='middle'><img src='".$file_foto."' height='".round(($fotohoogte/$schaal),0)."' width='".round(($fotobreedte/$schaal),0)."' alt='foto ".$foto_id."' onClick=\"BrowserWindow('foto_temp.php?foto=".$foto_id."','foto','scrollbars=yes')\"></td></tr>\n";
}else{
echo "<td align='center' valign='middle'><img src='".$file_foto."' height='".round(($fotohoogte/$schaal),0)."' width='".round(($fotobreedte/$schaal),0)."' alt='foto ".$foto_id."' onClick=\"BrowserWindow('foto_temp.php?foto=".$foto_id."','foto','scrollbars=yes')\"></td>\n";
}
}
for ($i = 0; $i <= ($aantal_per_rij-1); $i++){
if (($teller >= $aantal_fotos) and (($teller % $aantal_per_rij) != 0)){
$teller++;
echo "<td></td>\n";
}elseif (($teller >= $aantal_fotos) and (($teller % $aantal_per_rij) == 0)){
echo "</tr>\n";
break;
}else{
echo "<td></td></tr>\n";
}
}
echo "</table>\n";
?>
Dit bestand heb ik opgeslagen als fotoboek_temp.php
Pagina 3
De grote foto
Indien je klikt op de kleine fotos komt er een grote tevoorschijn in een kader dat iets groter is dan de maximumhoogte of -breedte die je ingesteld hebt.
Dit kan je bijvoorbeeld doen door volgende script. Er bestaan andere mogelijkheden hiervoor, dus ga ik er ook niet te lang over uitwijden. In dit script is een mogelijkheid ingebouwd om door te klikken naar de volgende en vorige foto en het kader verspringt hier ook weer dynamisch naargelang de grootte van de foto.
Zo, fotoliefhebbers, hopelijk hebben jullie hier wat aan. Door de nog vrij jonge ervaring PHP (2 maanden) heb ik zelfs ondervonden dat je dit ook kan gebruiken om de produkten van je webshop weer te geven, maar dan in een database gestuurde omgeving.
Willen jullie een voorbeeldje zien van dit fotoboek ? Surf dan naar de website http://www.grproductions.be/ben_karla. Klik hier op de 2e foto.
Dit kan je bijvoorbeeld doen door volgende script. Er bestaan andere mogelijkheden hiervoor, dus ga ik er ook niet te lang over uitwijden. In dit script is een mogelijkheid ingebouwd om door te klikken naar de volgende en vorige foto en het kader verspringt hier ook weer dynamisch naargelang de grootte van de foto.
<html>
<head>
<title></title>
<!-- Hier kan je de style zetten, of in een apart CSS bestand -->
</head>
<?php
include("fotoboek_vars.php");
$foto_groot = $_GET["foto"];
$file_foto_groot = $foto_dir."foto".$foto_groot.".jpg";
$file = "foto.php?foto=".$foto_groot;
// haal de hoogte en de breedte op van de image
$dimensions = getimagesize($file_foto_groot);
$bronbreedte = $dimensions[0];
$bronhoogte = $dimensions[1];
if (($bronhoogte > $max_hoogte) or ($bronbreedte > $max_hoogte)){
if ($bronhoogte < $bronbreedte){
$fotobreedte = $max_hoogte;
$fotohoogte = ($bronhoogte *$max_hoogte)/$bronbreedte;
if ($fotohoogte > $max_breedte){
$fotohoogte = $max_breedte;
$fotobreedte = ($bronbreedte * $max_breedte) / $bronhoogte;
}
}
if ($bronhoogte > $bronbreedte){
$fotohoogte = $max_hoogte;
$fotobreedte = ($bronbreedte * $max_hoogte) / $bronhoogte;
if ($fotobreedte > $max_breedte){
$fotobreedte = $max_breedte;
$fotohoogte = ($bronhoogte * $max_breedte) / $bronbreedte;
}
}
// als de foto vierkantig is
if ($bronhoogte == $bronbreedte){
$fotohoogte = $max_breedte;
$fotobreedte = $max_breedte;
}
}else{
$fotohoogte = $bronhoogte;
$fotobreedte = $bronbreedte;
}
$fotohoogte = round($fotohoogte,0);
$fotobreedte = round($fotobreedte,0);
?>
<script language="javascript">
function resize(){
var height = <?=$fotohoogte+150; ?>;
var width = <?=$fotobreedte+50; ?>;
window.resizeTo(width,height);
}
</script>
<body onLoad="resize();">
<table width="100%" height="100%">
<tr>
<td>
<div id="foto_navigatie">
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td align="right" width="48%">
<?php
if ($foto_groot <= 1){
echo "Vorige";
}else{
$foto_vorige = $foto_groot-1;
?>
<a href="<?="foto_temp.php?foto=".$foto_vorige; ?>" alt="Vorige foto">Vorige</a>
<?php
}
?>
</td>
<td width="4%"></td>
<td align="left" width="48%">
<?php
if ($foto_groot >= $aantal_fotos){
echo "Volgende";
}else{
$foto_volgende = $foto_groot+1;
?>
<a href="<?="foto_temp.php?foto=".$foto_volgende; ?>">Volgende</a>
<?php
}
?>
</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td align="center" valign="middle">
<div id="foto">
<img src="<?=$file_foto_groot; ?>" alt="Klik op de foto om te sluiten" onClick="self.close();" height="<?=$fotohoogte;?>" width="<?=$fotobreedte;?>">
</div>
</td>
</tr>
</table>
</body>
</html>
Zo, fotoliefhebbers, hopelijk hebben jullie hier wat aan. Door de nog vrij jonge ervaring PHP (2 maanden) heb ik zelfs ondervonden dat je dit ook kan gebruiken om de produkten van je webshop weer te geven, maar dan in een database gestuurde omgeving.
Willen jullie een voorbeeldje zien van dit fotoboek ? Surf dan naar de website http://www.grproductions.be/ben_karla. Klik hier op de 2e foto.
Reacties
0