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.
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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<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>
<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.