<!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>2.870 views
Ik heb de volgende broncode die erg gemakkelijk werkt. Nu wil ik graag een beeld die gekozen is in een pop-up laten komen. Weet iemand hier raad? Want het effect 'hover' moet niet in de pop-up aanwezig zijn.
