von Für eine private Webseite brauchte ich eine Galerie, in der ca. 1500 Fotos als Thumbnails angezeigt werden und auch im Großformat geöffnet werden können. Wenn man nach Templates für so eine Galerie sucht, findet man einige ganz nette Sachen. Gelandet bin ich bei der LightGallery (Achtung: nur für private Projekte kostenfrei!), deren Großanzeige der Bilder mir am besten gefallen hat und eine recht schöne Auswahlmöglichkeit des aktuell in groß angezeigten Bildes, sowie auch eine Downloadfunktion für das Foto bietet. Für die Galerie selber, also die Anzeige der Thumbnails, gefiel mir die JustifiedGallery besser. Wie ich diese (leider nicht) in Verbindung mit Lazyload, aufgrund der enormen Anzahl an Fotos, und ein bisschen PHP für die Generierung der URLs zu den Bilddateien genutzt habe, zeige ich in diesem Artikel.
Javascript / JQuery:
Die Einstellungen für das Aussehen und Verhalten der beiden Galerien nimmt man per JQuery vor und spricht dabei das entsprechende Element der Galerie an, in meinem Fall ist dies für beide Galerien #lightgallery:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<script type="text/javascript"> $(document).ready(function(){ $('#lightgallery').lightGallery({ selector: '.item', //thumbnail: false }); }); $('#lightgallery').justifiedGallery({ rowHeight : 110, //lastRow : 'justify', margins : 5 //waitThumbnailsLoad = false }); </script> |
PHP für die Img-Tag- und URL-Generierung:
Mit Hilfe eines einfachen PHP-Skriptes kann man sich das mühsame Einpflegen von img-Tags für eventuell mehr als Tausend Bilder recht einfach machen. Voraussetzung ist, dass man diese alle in einem Ordner unterbringt, den man mit Hilfe der glob-Funktion nach allen Dateien durchsuchen kann. Da die Bilder auch als Thumbnail gebraucht werden, sollte man diese zusätzlich in der Auflösung abspeichern die sodass der Browser die Bilder nicht auch noch umrendern muss!
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<?php $files = glob('/images/thumbnails/*.jpg'); foreach($files as $file) { $filename = explode('/',$file); if (strpos($file, 'bla') !== false) { echo ' <a class="item" href="/images/full/' . end($filename) . '" data-sub-html="<h2>Bla Bla</h2><p></p>"> <img style="max-height: 130px;" class="img-responsive" data-src="/images/thumbnails/' . end($filename) . '"> </a>'; } else { echo ' <a class="item" href="/images/full/' . end($filename) . '" data-sub-html="<h2>Foto von Irgendjemand</h2><p></p>"> <img style="max-height: 130px;" class="img-responsive" data-src="/images/thumbnails/' . end($filename) . '"> </a>'; } } ?> |
Zusätzlich habe ich bei bestimmten Bildern eine andere Bildunterschrift in der LightGallery anzeigen wollen. Zur Kennzeichnung der entsprechenden Bilder habe ich an deren Dateiname einfach ein Kürzel angehangen welches mit Hilfe von strpos ausgewertet bzw. gesucht wird.
Lazyload:
Ursprünglich wollte ich das ganze in Kombination mit Lazyload.js benutzen, allerdings gibt es dort ein unschönes Problem, für das ich auch bisher keine Lösung finden konnte. Da man für Lazyload so vorgehen muss, dass man den Link zum Thumbnail bzw. Vorschaubild nicht in das src-Attribut, sondern in das data-src-Attribut packen muss, zerhaut man sich somit die Anzeige der kleinen Fotos in der LightGallery 🙁
|
1 2 3 4 5 6 7 8 9 10 |
echo ' <a class="item" href="/images/full/' . end($filename) . '" data-sub-html="<h2>Foto von Irgendjemand</h2><p></p>"> <img style="max-height: 130px;" class="lazyload img-responsive" data-src="/images/thumbnails/' . end($filename) . '"> </a>'; <script> window.addEventListener("load", function(event) { lazyload(); }); </script> |
Weitere Mankos:
Auf dem Smartphone bekommt man Probleme, wenn man in die Justified-Gallery-Ansicht (also die Ansicht mit den vielen kleinen Vorschaubildern) hineinzoomt und dann ein Bild vergrößert und dadurch in die LightGallery-Ansicht wechselt. Dann sind die Steuererlemente der LightGallery nicht mehr zu sehen und man kann auch nicht mehr herauszoomen, da man durch die Bewegungen nur von einem Foto zum anderen wischt und keine Chance mehr hat diese wieder zu verkleinern. Zumindest war dies im Chrome so.
Ebenfalls kann es beim Laden der Vorschaubilder passieren, dass der Browser auf dem Smartphone, je nach Leistungsfähigkeit, erst einmal einfriert oder keine Bilder mehr lädt.
