Foto album met lightbox
Ik ben bezig met een website waar nu een fotoalbum opstaat wat goed werkt. Nou zou ik hier alleen lightbox op willen zetten.
De website in elkaar zetten ging me redelijk goed af. Maar nu wordt het me toch net iets te moeilijk.
Wat op deze site staat http://www.huddletogether.com/projects/lightbox2/#how
zou in dit script moeten komen
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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<?php
// De map waar je in zit
if(!isset($_GET['dir']))
{
$directory = 'PAGINAS/ALBUMS';
}
else
{
$directory = $_GET['dir'];
}
// Toegestane extensies
$ext = array('jpg', 'jpeg', 'gif', 'png', 'JPG', 'JPEG', 'GIF', 'PNG');
// Map voor thumbnails
$thumb = 'thumbs';
// Afmetingen voor thumbs
$width = 120;
$height = 90;
// Stylesheet invoegen
echo '<link rel="stylesheet" type="text/css" href="Fotoalbum.css" />';
// Begin fotoalbums
echo '<div class="fotoalbum">';
// De navigatie
echo '<div class="navigatie">';
$array = explode('/', $directory);
array_shift($array);
$aantal = count($array);
for($i = 0; $i < $aantal; $i++)
{
echo '<a class="nav" href="?page='.$_GET['page'].'&dir=PAGINAS/'.($i-2>=0 ? $array[($i-2)].'/' : NULL).($i-1>=0 ? $array[($i-1)].'/' : NULL).$array[$i].'">'.ucwords(strtolower($array[$i])).'</a>';
if($i < ($aantal - 1))
{
echo ' » ';
}
}
echo '</div>';
// Kijken of het wel een echte dir is.
if(is_dir($directory))
{
// De directory openen
if($open = @opendir($directory))
{
// Alle files loopen
while(FALSE !==($file = readdir($open)))
{
// Alleen als de file anders is als ., .. en $thumb mag ie door.
if($file != '.' && $file != '..' && $file != $thumb)
{
// Alles in een array zetten
$arrayfile[] = $file;
// Extensie checken
if(in_array(substr($file, -3), $ext) OR in_array(substr($file, -4), $ext))
{
if(!file_exists($thumb.'/'.$file))
{
// De dir aanmaken waar thumbs inkomen
@mkdir($directory.'/'.$thumb, 0775);
// Thumbs maken
$imagehw = getimagesize($directory.'/'.$file);
$src_width = $imagehw[0];
$src_height = $imagehw[1];
$src_width > $src_height ? $dest_width = $width : $dest_width = $height;
$tmp = $src_width / $dest_width;
$dest_height = $src_height / $tmp;
$src_img = imagecreatefromjpeg($directory.'/'.$file);
$dst_img = imagecreatetruecolor($dest_width,$dest_height);
imagecopyresampled($dst_img, $src_img, 0, 0, 0, 0, $dest_width, $dest_height, $src_width, $src_height);
imagejpeg($dst_img, $directory.'/'.$thumb.'/'.$file, $width);
imagedestroy($src_img);
imagedestroy($dst_img);
}
}
}
}
closedir($open);
}
// De array netjes sorteren
sort($arrayfile);
// Dan de array openen
foreach($arrayfile as $file)
{
if($file != '.' && $file != '..' && $file != $thumb)
{
// Kijken of het een toegestaan bestand is.
if(in_array(substr($file, -3), $ext) OR in_array(substr($file, -4), $ext))
{
if(file_exists($directory.'/'.$file))
{
// Afbeelding maten ophalen
$afb = getimagesize($directory.'/'.$file);
if($afb[0] > $afb[1])
{
echo '<div class="lijst"><a href="'.$directory.'/'.$file.'" target="_blank"><img class="foto1" src="'.$directory.'/'.$thumb.'/'.$file.'"></a></div>';
}
else
{
echo '<div class="lijst"><a href="'.$directory.'/'.$file.'" target="_blank"><img class="foto2" src="'.$directory.'/'.$thumb.'/'.$file.'"></a></div>';
}
}
}
elseif(is_dir($directory.'/'.$file)) // Als het een map is
{
echo '<div class="lijst"><a class="map" href="?page='.$_GET['page'].'&dir='.$directory.'/'.$file.'">'.$file.'</a></div>';
}
}
}
}
else
{
echo 'De directory die jij zoekt ( '.$album.' ) bestaat niet';
}
echo '</div>';
?>
// De map waar je in zit
if(!isset($_GET['dir']))
{
$directory = 'PAGINAS/ALBUMS';
}
else
{
$directory = $_GET['dir'];
}
// Toegestane extensies
$ext = array('jpg', 'jpeg', 'gif', 'png', 'JPG', 'JPEG', 'GIF', 'PNG');
// Map voor thumbnails
$thumb = 'thumbs';
// Afmetingen voor thumbs
$width = 120;
$height = 90;
// Stylesheet invoegen
echo '<link rel="stylesheet" type="text/css" href="Fotoalbum.css" />';
// Begin fotoalbums
echo '<div class="fotoalbum">';
// De navigatie
echo '<div class="navigatie">';
$array = explode('/', $directory);
array_shift($array);
$aantal = count($array);
for($i = 0; $i < $aantal; $i++)
{
echo '<a class="nav" href="?page='.$_GET['page'].'&dir=PAGINAS/'.($i-2>=0 ? $array[($i-2)].'/' : NULL).($i-1>=0 ? $array[($i-1)].'/' : NULL).$array[$i].'">'.ucwords(strtolower($array[$i])).'</a>';
if($i < ($aantal - 1))
{
echo ' » ';
}
}
echo '</div>';
// Kijken of het wel een echte dir is.
if(is_dir($directory))
{
// De directory openen
if($open = @opendir($directory))
{
// Alle files loopen
while(FALSE !==($file = readdir($open)))
{
// Alleen als de file anders is als ., .. en $thumb mag ie door.
if($file != '.' && $file != '..' && $file != $thumb)
{
// Alles in een array zetten
$arrayfile[] = $file;
// Extensie checken
if(in_array(substr($file, -3), $ext) OR in_array(substr($file, -4), $ext))
{
if(!file_exists($thumb.'/'.$file))
{
// De dir aanmaken waar thumbs inkomen
@mkdir($directory.'/'.$thumb, 0775);
// Thumbs maken
$imagehw = getimagesize($directory.'/'.$file);
$src_width = $imagehw[0];
$src_height = $imagehw[1];
$src_width > $src_height ? $dest_width = $width : $dest_width = $height;
$tmp = $src_width / $dest_width;
$dest_height = $src_height / $tmp;
$src_img = imagecreatefromjpeg($directory.'/'.$file);
$dst_img = imagecreatetruecolor($dest_width,$dest_height);
imagecopyresampled($dst_img, $src_img, 0, 0, 0, 0, $dest_width, $dest_height, $src_width, $src_height);
imagejpeg($dst_img, $directory.'/'.$thumb.'/'.$file, $width);
imagedestroy($src_img);
imagedestroy($dst_img);
}
}
}
}
closedir($open);
}
// De array netjes sorteren
sort($arrayfile);
// Dan de array openen
foreach($arrayfile as $file)
{
if($file != '.' && $file != '..' && $file != $thumb)
{
// Kijken of het een toegestaan bestand is.
if(in_array(substr($file, -3), $ext) OR in_array(substr($file, -4), $ext))
{
if(file_exists($directory.'/'.$file))
{
// Afbeelding maten ophalen
$afb = getimagesize($directory.'/'.$file);
if($afb[0] > $afb[1])
{
echo '<div class="lijst"><a href="'.$directory.'/'.$file.'" target="_blank"><img class="foto1" src="'.$directory.'/'.$thumb.'/'.$file.'"></a></div>';
}
else
{
echo '<div class="lijst"><a href="'.$directory.'/'.$file.'" target="_blank"><img class="foto2" src="'.$directory.'/'.$thumb.'/'.$file.'"></a></div>';
}
}
}
elseif(is_dir($directory.'/'.$file)) // Als het een map is
{
echo '<div class="lijst"><a class="map" href="?page='.$_GET['page'].'&dir='.$directory.'/'.$file.'">'.$file.'</a></div>';
}
}
}
}
else
{
echo 'De directory die jij zoekt ( '.$album.' ) bestaat niet';
}
echo '</div>';
?>
Ik heb echter geen idee waar ik dit in zou moeten zetten.
zou iemand me hiermee kunnen helpen?
alvast hartstikke bedankt.
ps de website nu is www.pgbestratingen.nl
Je moet in ieder geval de javascript en css pagina's inovegen op fotoalbum.php of index.php, vervolgens zul je van regel 109 dit moeten maken:
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
<?php
echo '
<div class="lijst">
<a href="'.$directory.'/'.$file.'" rel="lightbox[roadtrip]">
<img class="foto1" src="'.$directory.'/'.$thumb.'/'.$file.'">
</a>
</div>';
?>
echo '
<div class="lijst">
<a href="'.$directory.'/'.$file.'" rel="lightbox[roadtrip]">
<img class="foto1" src="'.$directory.'/'.$thumb.'/'.$file.'">
</a>
</div>';
?>
en van 113 dit:
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
<?php
echo '
<div class="lijst">
<a href="'.$directory.'/'.$file.'" rel="lightbox[roadtrip]">
<img class="foto2" src="'.$directory.'/'.$thumb.'/'.$file.'">
</a>
</div>';
?>
echo '
<div class="lijst">
<a href="'.$directory.'/'.$file.'" rel="lightbox[roadtrip]">
<img class="foto2" src="'.$directory.'/'.$thumb.'/'.$file.'">
</a>
</div>';
?>
Maak van regel 3 tm 11 ook even dit (staat netter):
Code (php)
1
2
3
4
2
3
4
<?php
// De map waar je in zit
$directory = !isset($_GET['dir']) ? 'PAGINAS/ALBUMS' : $_GET['dir'];
?>
// De map waar je in zit
$directory = !isset($_GET['dir']) ? 'PAGINAS/ALBUMS' : $_GET['dir'];
?>
PS: Ik heb al heel wat nieuwe versies hiervan gemaakt, als je echt zwaar geïnteresseerd bent in dit script kan ik je die miss ook nog wel geven ;).
Gewijzigd op 02/02/2011 19:40:29 door Milo S
Het is me al een heel eind gelukt. Nu is alleen het geval dat de "lightbox" (zo noem ik het maar even snel) in de iframe natuurlijk komt te staan.
mijn excuses als dit fout en verouderd is, ik heb alles geleerd door maar te proberen en te oefenen dus ik weet niet beter.
zou dit probleem met iframe nog op te lossen zijn? ik heb al geprobeerd om:
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
in de header te zetten, en in de map fotos.php
maar dit geeft geen succes dan word de foto onder de kleine thumbs weer gegeven.
Dat systeempje moet checken of:
- pagina toegestaan is
- bestand bestaat
Klopt dat allemaal, dan includen.
Doe je het op die manier kan het eigenlijk niet mis gaan.