Link to Testpage :
http://pau.li/g1.php
http://pau.li/g2.php
Files are all lowercase - e.g. 2-die-kulisse-zug-23.jpg
- - - - g1.php - - - -
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Page</title>
<meta name="generator" content="WYSIWYG Web Builder 9 -
http://www.wysiwygwebbuilder.com">
<style type="text/css">
body
{
background-color: #FFFFFF;
color: #000000;
font-family: Arial;
font-weight: normal;
font-size: 13px;
line-height: 1.1875;
margin: 0;
padding: 0;
}
a
{
color: #F5F5F5;
text-decoration: none;
}
a:visited
{
color: #DCDCDC;
}
a:active
{
color: #C0C0C0;
}
a:hover
{
color: #D3D3D3;
text-decoration: underline;
}
input:focus, textarea:focus, select:focus
{
outline: none;
}
#wb_Text1
{
background-color: transparent;
background-image: none;
border: 0px solid #000000;
padding: 0;
margin: 0;
text-align: left;
}
#wb_Text1 div
{
text-align: left;
}
#PhotoCollage1
{
box-sizing: border-box;
font-size: 0;
width: 100%;
height: 100%;
table-layout: fixed;
display: table;
margin: 0;
position: relative;
}
#PhotoCollage1 .thumbnail img
{
border: 0px #000000 solid;
box-sizing: border-box;
}
#PhotoCollage1 .thumbnail
{
position: absolute;
}
#PhotoCollage1 .thumbnail img
{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript" src="wb.photocollage.min.js"></script>
<link rel="stylesheet" href="prettyPhoto/css/prettyPhoto.css" type="text/css">
<script type="text/javascript" src="prettyPhoto/js/jquery.prettyPhoto.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("a[rel^='prettyPhoto_PhotoCollage1']").prettyPhoto({theme:'facebook',social_tools:false});
$("#PhotoCollage1").photocollage({ effect: 'scale', duration: 600, padding: 4, matrix: '1,1,1,1,1,4,0,0,0,1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1' });
});
</script>
</head>
<body>
<div id="wb_Text1" style="position:absolute;left:52px;top:16px;width:309px;height:27px;z-index:0;">
<span style="color:#000000;font-family:Arial;font-size:24px;">TEST TITLE</span></div>
<div id="wb_PhotoCollage1" style="position:absolute;left:42px;top:54px;width:677px;height:677px;z-index:1;">
<div id="PhotoCollage1">
<div class="thumbnails">
<?php
$images_folder = "./gallery/";
$html = "";
$images = array();
$dir = opendir($images_folder);
while ($filename = readdir($dir))
{
$ext = pathinfo($filename, PATHINFO_EXTENSION);
$ext = strtolower($ext);
if ($ext == 'gif' || $ext == 'jpeg' || $ext == 'jpg' || $ext == 'png')
{
$images[] = $filename;
}
}
closedir($dir);
sort($images);
$count = 0;
foreach($images as $filename)
{
$count++;
if ($count > 10)
break;
$exif = exif_read_data($images_folder.$filename);
$title = trim($exif['ImageDescription']);
$html .= "<div class=\"thumbnail\"><a href=\"$images_folder$filename\" data-rel=\"prettyPhoto_PhotoCollage1[PhotoCollage1]\" title=\"$title\"><img alt=\"$title\" id=\"PhotoCollage1_img$count\" src=\"$images_folder$filename\" title=\"$title\"></a></div>";
}
echo $html;
?>
</div>
</div></div>
</body>
</html>