Fotoalbum met lytebox
Ik loop al een week of 2 te hakken tegen een probleem. Ik heb een script hier gedownload en deze heb ik iets aangepast naar eigen wensen om in te bouwen op een website. Nu was ook mijn bedoeling in dit script ( het betreft een fotoalbum script ) lightbox (oftewel de variant ervan: lytebox) in te bouwen.. Hij doet het, alleen wanneer ik de andere categorie pak niet meer..
www.deswartmodelbouw.nl/fotoalbum
Helppp!!!! :(
wie heeft de oplossing?
Groetjes,
Christ
Script:
<script type="text/javascript" language="javascript" src="scripts/lytebox.js"></script>
// Fotoalbum.php
// Copyright @ party-vision.nl
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
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
<?php
//Variabelen
$paginanaam="Tractoren";
// De map waar je in zit
if(!isset($_GET['dir']))
{
$directory = 'album';
}
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 = 160;
$height = 120;
// Stylesheet invoegen
echo '<link rel="stylesheet" type="text/css" href="Fotoalbum.css" />';
// Begin fotoalbums
echo '<div align="center">';
echo '<div class="fotoalbum">';
echo '<a href="http://www.deswartmodelbouw.nl/fotoalbum/index.htm"><font style="font-weight:bold">Fotoalbum</font></a> > <a href="index.php"><font style="font-weight:bold">'.$paginanaam.'</font></a>';
echo '<br>';
echo '<br>';
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 '<a href="'.$directory.'/'.$file.'" rel="lytebox[vacation] target="_blank"><img class="foto1" src="'.$directory.'/'.$thumb.'/'.$file.'"></a>';
}
else
{
echo '<a href="'.$directory.'/'.$file.'" rel="lytebox[vacation] target="_blank"><img class="foto2" src="'.$directory.'/'.$thumb.'/'.$file.'"></a>';
}
}
}
elseif(is_dir($directory.'/'.$file)) // Als het een map is
{
echo '<a href="?page='.$_GET['page'].'&dir='.$directory.'/'.$file.'">'.$file.'</a><br>';
}
}
}
}
else
{
echo 'De directory die jij zoekt ( '.$album.' ) bestaat niet';
}
echo '</div>';
?>
//Variabelen
$paginanaam="Tractoren";
// De map waar je in zit
if(!isset($_GET['dir']))
{
$directory = 'album';
}
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 = 160;
$height = 120;
// Stylesheet invoegen
echo '<link rel="stylesheet" type="text/css" href="Fotoalbum.css" />';
// Begin fotoalbums
echo '<div align="center">';
echo '<div class="fotoalbum">';
echo '<a href="http://www.deswartmodelbouw.nl/fotoalbum/index.htm"><font style="font-weight:bold">Fotoalbum</font></a> > <a href="index.php"><font style="font-weight:bold">'.$paginanaam.'</font></a>';
echo '<br>';
echo '<br>';
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 '<a href="'.$directory.'/'.$file.'" rel="lytebox[vacation] target="_blank"><img class="foto1" src="'.$directory.'/'.$thumb.'/'.$file.'"></a>';
}
else
{
echo '<a href="'.$directory.'/'.$file.'" rel="lytebox[vacation] target="_blank"><img class="foto2" src="'.$directory.'/'.$thumb.'/'.$file.'"></a>';
}
}
}
elseif(is_dir($directory.'/'.$file)) // Als het een map is
{
echo '<a href="?page='.$_GET['page'].'&dir='.$directory.'/'.$file.'">'.$file.'</a><br>';
}
}
}
}
else
{
echo 'De directory die jij zoekt ( '.$album.' ) bestaat niet';
}
echo '</div>';
?>
Op deze link doet lightbox (lytebox) het wel. Scroll maar eens naar de onderkant van de website. Daar staat je lightbox... Alleen hij kan de lightbox css niet vinden, daarom komt er geen overlay etc....
Overigens heb ik het script ingebouwd in de website:
http://deswartmodelbouw.nl/
ik merk trouwens dat er 3 css bestanden zijn: Fotoalbum.css (van het album zelf), lytebox.css en dsmb2010.css (van de website)
Gaat dit niet door mekaar lopen?
edit: overigens met css ingevoerd doet hij het ook nog niet..
Gewijzigd op 16/06/2010 08:58:06 door Christ Machielsen
http://deswartmodelbouw.nl/ word je foto album via iframe op je website getoond, dan doet hij het wel omdat dan de CSS wel gevonden word omdat hij door je website word geincluded. Maar als je alleen foto album zelf bekijkt heb je de headers van je website niet meer waardoor je geen CSS meer hebt....
EDIT: je hebt CSS toegevoegd aan fotoalbum pagina en nu doet hij het http://www.deswartmodelbouw.nl/fotoalbum/tractoren/?page=&dir=album/Fendt%20211%20Vario
Gewijzigd op 16/06/2010 09:03:16 door Joakim Broden
Ik heb hem in diverse browsers geprobeerd, en bij internet explorer brengt hij het er nog het beste vanaf.. Chrome etcetera vinden de foto op de een of andere manier niet eens..
ik denk dat het in het script zit.. heb je nog ideen?
groetjes
Code (php)
1
rel="lytebox[vacation] target="_blank"
Maar daar dit van:
Code (php)
1
rel="lytebox[vacation]" target="_blank"
Je sluit rel niet af.
en werk niet met spaties in de urls van de afbeeldingen! Dat kan voor problemen zorgen
Code (php)
1
album/Fendt 211 Vario/thumbs/P1030827.jpg
Maak daar zoiets als dit van:
Code (php)
1
album/Fendt_211_Vario/thumbs/P1030827.jpg
Chris... Niet bumpen en heeft niks met je CSS te maken! die werken goed..
Gewijzigd op 16/06/2010 09:09:23 door Joakim Broden
Ik heb alles geprobeerd wat je zei maar nog steeds niks... :(
Is het je al eens opgevallen dat als je over het menu heen gaat, de css-elementen in de pagina knipperen?
Haal al die spaties eens uit je urls....
conclusie: google chrome laadt de foto's perfect zonder inbouw zegmaar, dus gewoon de losse pagina, met index eromheen niet meer..
het probleem ligt dus nu bij de index denk ik?
edit: internet explorer doet het nu goed bij mij, chrome nog steeds niet in de index maar wel los.. eveneens firefox en opera laden hetzelfde als chrome
Gewijzigd op 16/06/2010 09:40:09 door Christ Machielsen
De url van de afbeelding is zo: http://www.deswartmodelbouw.nl/fotoalbum/tractoren/album/Fendt%20511%20C/P1040448.jpg
en de url die je gebruikt is zo: http://deswartmodelbouw.nl/album/Fendt%20511%20C/P1040446.jpg
Zorg dus dat je de goede url gebruikt...