Hallo Leute, ich habe seit Jahren eine kleine selbstgebaute Galerie für meine Zwecke zusammen gebaut die genau das tut was sie soll und mehr nicht. Da ich aber vor kurzem auf einer Hochzeit von einem guten Freund war, die Fotos wieder auf meine Webseite gepackt habe, würde ich die Galerie mit so einem Lazyload etwas performanter machen.
An sich ist der Aufbau relativ simpel... PHP guckt in einen Ordner rein, schaut wie viele Dateien darin sind und holt sich dessen Namen. Dieses wird in ein Array gepackt, alphabetisch sortiert und gut ist. Etwas weiter unten im HTML Bereich wird dann das Array anhand einer 'foreach()' Schleife ausgegeben.
Allerdings sind die Thumbs (in der Übersicht) mit maximal 300 x 300px bei einer Anzahl von ca. 1.300 Stück schon grob 80 MB groß... und das führt zu einer sehr langen Ladezeit beim öffnen der Seite. Wenn dann alles geladen ist, kann man auf das Thumb drauf klicken und es wird in einer Lightbox ausgegeben, so dass man relativ einfach vorwärts und rückwärts gehen kann
Jetzt wäre es aber noch toll, wenn man ein Lazyload einbinden könnte, so dass das Laden etwas besser abläuft. Ich hatte diese Variante gefunden und mal eingebaut... wenn ich die Images dann von src="" in data-src="" abändere, funktionieren die Thumbs... allerdings lädt er mir beim öffnen der PHP Seite dennoch alle Images in einem Durchgang. Entweder übersehe ich was, oder ich muss mir eine andere Variante einfallen lassen.
Vielleicht hat ja jemand die eine oder andere Idee für mich, den Quellcode gibt es nun auch dazu... ist halt recht simple gehalten, tut aber bei einer Galerie bis ca. 400 - 500 Bilder alles was benötigt wird
Ich bin nun auch kein Profi Web-Entwickler, daher wird der eine oder andere vielleicht den Code komisch finden, aber wie schon erwähnt... im groben und ganzen tut es das was es soll und vielleicht kann man da noch irgendwie ein Lazyload einbinden
Schon mal vielen Dank für eure Hilfe und noch einen schönen Freitag... für den einen oder anderen wird ja bald Wochenende sein.
Gruß, Domi
An sich ist der Aufbau relativ simpel... PHP guckt in einen Ordner rein, schaut wie viele Dateien darin sind und holt sich dessen Namen. Dieses wird in ein Array gepackt, alphabetisch sortiert und gut ist. Etwas weiter unten im HTML Bereich wird dann das Array anhand einer 'foreach()' Schleife ausgegeben.
Allerdings sind die Thumbs (in der Übersicht) mit maximal 300 x 300px bei einer Anzahl von ca. 1.300 Stück schon grob 80 MB groß... und das führt zu einer sehr langen Ladezeit beim öffnen der Seite. Wenn dann alles geladen ist, kann man auf das Thumb drauf klicken und es wird in einer Lightbox ausgegeben, so dass man relativ einfach vorwärts und rückwärts gehen kann
Jetzt wäre es aber noch toll, wenn man ein Lazyload einbinden könnte, so dass das Laden etwas besser abläuft. Ich hatte diese Variante gefunden und mal eingebaut... wenn ich die Images dann von src="" in data-src="" abändere, funktionieren die Thumbs... allerdings lädt er mir beim öffnen der PHP Seite dennoch alle Images in einem Durchgang. Entweder übersehe ich was, oder ich muss mir eine andere Variante einfallen lassen.
Vielleicht hat ja jemand die eine oder andere Idee für mich, den Quellcode gibt es nun auch dazu... ist halt recht simple gehalten, tut aber bei einer Galerie bis ca. 400 - 500 Bilder alles was benötigt wird
HTML:
<?php
include_once('inc/config.php');
$folder = "xxxxx";
$handle = opendir($_SERVER['DOCUMENT_ROOT']."/bilder/".$folder."/");
while(false !== ($file = readdir($handle))) {
if(preg_match('/.*\.jpe?g/i', $file)) {
$files[] = $file;
}
}
asort($files);
closedir($handle);
?>
<!DOCTYPE html>
<html lang="de">
<head>
<base href="<?php echo HTTP_HOST; ?>/">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="robots" content="<?php echo ROBOTS; ?>" />
<title>Fotos - xxxxx</title>
<link href="css/normalize.css" rel="stylesheet" type="text/css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="css/lightbox.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="navi" class="clearfix">
<ul class="menu">
<?php foreach(require_once($_SERVER['DOCUMENT_ROOT']."/inc/navigation.php") AS $key => $url) { ?>
<li><a href="<?php echo $url; ?>"><?php echo $key; ?></a></li>
<?php } ?>
</ul>
</div>
<div id="inhalt" class="clearfix">
<div id="content">
<div class="artikel">
<?php
foreach($files AS $name) {
echo '<a data-imagelightbox="f" href="bilder/'.$folder.'/'.$name.'"><img alt="'.$name.'" class="lazy thumbs" src="bilder/'.$folder.'/thumbs/'.$name.'" title="'.$name.'"></a> ';
}
?>
</div>
<div class="artikel_seperator"></div>
</div>
</div>
<div id="footer"></div>
</div>
<script src="//code.jquery.com/jquery-latest.js"></script>
<script src="js/jquery-imagelightbox.min.js" type="text/javascript"></script>
<script src="js/script-lightbox.js" type="text/javascript"></script>
</body>
</html>Ich bin nun auch kein Profi Web-Entwickler, daher wird der eine oder andere vielleicht den Code komisch finden, aber wie schon erwähnt... im groben und ganzen tut es das was es soll und vielleicht kann man da noch irgendwie ein Lazyload einbinden
Schon mal vielen Dank für eure Hilfe und noch einen schönen Freitag... für den einen oder anderen wird ja bald Wochenende sein.
Gruß, Domi
Zuletzt bearbeitet:
In welchem Format liegen die Bilder denn vor? Ich würde auf jeden Fall empfehlen die Größe der Bilder deutlich zu reduzieren und ggfs. nach JPG zu konvertieren. Wenn jemand die Bilder in Originalqualität haben möchte, dann gibt es dafür deutlich bessere Kanäle, z.B. Cloud oder einfach als Dateidownload von deinem Webserver.
Ich bin dann mal weg 
