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.
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.
Code (php)
1
<?php $teller = 0; ?>
Nu maken we een for-lus voor het aantal fotos te doorlopen.
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.
Code (php)
1
<?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:
Code (php)
1
<?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:
Code (php)
1
2
3
4
5
2
3
4
5
<?php
$dimensions = getimagesize($file_foto);
$bronbreedte = $dimensions[0];
$bronhoogte = $dimensions[1];
?>
$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.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<?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;
}
?>
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:
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.
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
<?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";
}
?>
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.
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<script type="text/javascript">
<!--
function BrowserWindow(url,winName,features) {
window.open(url,winName,features);
}
//-->
</script>
<!--
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.
Code (php)
1
2
3
4
5
6
2
3
4
5
6
<table>
<tr>
<td>foto1</td>
<td>foto2</td>
<td>foto3</td>
</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:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
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:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<?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";
?>
<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
« vorige pagina | volgende pagina »