Hallo!
Ich möchte mir eine Fotogallerie bauen, welches das jquery Plugin "justified.js" nutzt (http://nitinhayaran.github.io/Justified.js/demo/)
Im Header der Seite ist folgendes definiert:
Code
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="/script/jquery.justified.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="/script/jquery.justified.js"></script>
</head>Dazu habe ich mir nun mit PHP ein Auslesen eines Ordnerinhalts der Fotos gebaut:
PHP
<div class="image-container">
<?php
$ordner = "/path/";
$allebilder = scandir($ordner);
foreach ($allebilder as $bild) {
$bildinfo = pathinfo($ordner."/".$bild);
$size = ceil(filesize($ordner."/".$bild)/1024);
if ($bild != "." && $bild != ".." && $bild != "_notes" && $bildinfo['basename'] != "Thumbs.db") {
?>
<img src="<?php echo $bildinfo['dirname']."/".$bildinfo['basename'];?>"/></a>
<?php
};
};
?>
</div>Dieser Teil funktioniert nun auch soweit.
Nun kommt für mich die Schwierigkeit, weil ich keine Erfahrung bei JavaScript habe.
Nun füge ich den JavaScript Code lt. der Anleitung von "justified.js" ein:
Code
<script type="text/javascript">
$('.image-container').empty().justifiedImages({
images: photos,
rowHeight: 200,
maxRowHeight: 400,
thumbnailPath: function(photo, width, height){
var purl = photo.url_s;
if( photo.url_n && (width > photo.width_s * 1.2 || height > photo.height_s * 1.2) ) purl = photo.url_n;
if( photo.url_m && (width > photo.width_n * 1.2 || height > photo.height_n * 1.2) ) purl = photo.url_m;
if( photo.url_z && (width > photo.width_m * 1.2 || height > photo.height_m * 1.2) ) purl = photo.url_z;
if( photo.url_l && (width > photo.width_z * 1.2 || height > photo.height_z * 1.2) ) purl = photo.url_l;
return purl;
},
getSize: function(photo){
return {width: photo.width_s, height: photo.height_s};
},
margin: 1
});
</script>Ich bekomme keine Fotos angezeigt, welche im PHP Script definiert wurden.
Ich muss wahrscheinlich den Inhalt von PHP noch auf die JavaScript Referenz "photos" übergeben.
Wie mache ich das?
Ich wäre dankbar um eure Hilfe.