PHP directory images, wil image in pop-up ipv nieuwe tab
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
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Galerij images</title>
<style type="text/css">
*{margin:0;padding:0;}
body
{
background:#fff;
}
img
{
width:auto;
box-shadow:0px 0px 20px #cecece;
border-radius: 5px;
-moz-transform: scale(0.7);
-moz-transition-duration: 0.6s;
-webkit-transition-duration: 0.6s;
-webkit-transform: scale(0.7);
-ms-transform: scale(0.7);
-ms-transition-duration: 0.6s;
}
img:hover
{
box-shadow: 20px 20px 20px #dcdcdc;
border-radius: 5px;
-moz-transform: scale(0.8);
-moz-transition-duration: 0.6s;
-webkit-transition-duration: 0.6s;
-webkit-transform: scale(0.8);
-ms-transform: scale(0.8);
-ms-transition-duration: 0.6s;
}
#header
{
width:100%;
height:24px;
background:#DD4F00;
font-family:"Lucida Handwriting";
font-family:Verdana, Geneva, sans-serif;
text-align:center;
font-size:16px;
font-weight:bolder;
color:#f9f9f9;
}
#footer
{
width:100%;
height:20px;
background:#DD4F00;
font-family:"Lucida Handwriting";
font-family:Verdana, Geneva, sans-serif;
text-align:center;
font-size:12px;
font-weight:bolder;
color:#f9f9f9;
}
#body
{
margin:0 auto;
text-align:center;
}
</style>
</head>
<body>
<div id="header">
<label>Images in directory</label>
</div>
<div id="body">
<?php
$folder_path = 'images/'; //image's folder path
$num_files = glob($folder_path . "*.{JPG,jpg,gif,png,bmp}", GLOB_BRACE);
$folder = opendir($folder_path);
if($num_files > 0)
{
while(false !== ($file = readdir($folder)))
{
$file_path = $folder_path.$file;
$extension = strtolower(pathinfo($file ,PATHINFO_EXTENSION));
if($extension=='jpg' || $extension =='png' || $extension == 'gif' || $extension == 'bmp')
{
?>
<a href="<?php echo $file_path; ?>" target="_blank"><img src="<?php echo $file_path; ?>" height="250" /></a>
<?php
}
}
}
else
{
echo "Sorry, no images in this directory!";
}
closedir($folder);
?>
<div id="footer">
<label>http://www.codingcage.com/2015/06/creating-image-gallery-from-folder-php.html</label>
</div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Galerij images</title>
<style type="text/css">
*{margin:0;padding:0;}
body
{
background:#fff;
}
img
{
width:auto;
box-shadow:0px 0px 20px #cecece;
border-radius: 5px;
-moz-transform: scale(0.7);
-moz-transition-duration: 0.6s;
-webkit-transition-duration: 0.6s;
-webkit-transform: scale(0.7);
-ms-transform: scale(0.7);
-ms-transition-duration: 0.6s;
}
img:hover
{
box-shadow: 20px 20px 20px #dcdcdc;
border-radius: 5px;
-moz-transform: scale(0.8);
-moz-transition-duration: 0.6s;
-webkit-transition-duration: 0.6s;
-webkit-transform: scale(0.8);
-ms-transform: scale(0.8);
-ms-transition-duration: 0.6s;
}
#header
{
width:100%;
height:24px;
background:#DD4F00;
font-family:"Lucida Handwriting";
font-family:Verdana, Geneva, sans-serif;
text-align:center;
font-size:16px;
font-weight:bolder;
color:#f9f9f9;
}
#footer
{
width:100%;
height:20px;
background:#DD4F00;
font-family:"Lucida Handwriting";
font-family:Verdana, Geneva, sans-serif;
text-align:center;
font-size:12px;
font-weight:bolder;
color:#f9f9f9;
}
#body
{
margin:0 auto;
text-align:center;
}
</style>
</head>
<body>
<div id="header">
<label>Images in directory</label>
</div>
<div id="body">
<?php
$folder_path = 'images/'; //image's folder path
$num_files = glob($folder_path . "*.{JPG,jpg,gif,png,bmp}", GLOB_BRACE);
$folder = opendir($folder_path);
if($num_files > 0)
{
while(false !== ($file = readdir($folder)))
{
$file_path = $folder_path.$file;
$extension = strtolower(pathinfo($file ,PATHINFO_EXTENSION));
if($extension=='jpg' || $extension =='png' || $extension == 'gif' || $extension == 'bmp')
{
?>
<a href="<?php echo $file_path; ?>" target="_blank"><img src="<?php echo $file_path; ?>" height="250" /></a>
<?php
}
}
}
else
{
echo "Sorry, no images in this directory!";
}
closedir($folder);
?>
<div id="footer">
<label>http://www.codingcage.com/2015/06/creating-image-gallery-from-folder-php.html</label>
</div>
</div>
</body>
</html>
- Ariën -:
Gelieve in het vervolg bij code de [code][/code]-tags gebruiken i.p.v. quote-tags.
Hier kan je meer lezen over de mogelijke opmaakcodes.
Alvast bedankt!
Hier kan je meer lezen over de mogelijke opmaakcodes.
Alvast bedankt!
Gewijzigd op 10/05/2017 13:36:13 door - Ariën -
Gewijzigd op 10/05/2017 13:14:50 door John D
Dit is het cruciale deel:
Code (php)
Ik krijg met lightbox geen pop-up maar beiden naast elkaar.
Code (php)
De animatie, hover, blijft ook aanwezig. Ik ben er niet uit.
Quote:
De animatie, hover, blijft ook aanwezig. Ik ben er niet uit.
Ook niet heel gek, de hover heb je ingesteld voor alle images in je css. Wellicht helpt het als je dit in een bepaalde class zet en deze in de popup niet toepast op de afbeeldingen.
http://www.resume.pe.hu/beeldbankkopie.php
Ik zal in de CSS nog iets moeten aanpassen. Tips, graag. Dank voor de richting!