Ansprechendes Mauerwerk: Gamma Gallery nutzt Masonry und Responsive Images
Kommentare

Maximale Responsiveness bei minimalem Traffic: Das war das Ziel des jQuery-Plug-ins Gamma Gallery aus dem Hause „Codrops“. Dabei machten sich die Autoren eine Menge bestehendes Wissen zu nutze, berücksichtigten

Maximale Responsiveness bei minimalem Traffic: Das war das Ziel des jQuery-Plug-ins Gamma Gallery aus dem Hause „Codrops“. Dabei machten sich die Autoren eine Menge bestehendes Wissen zu nutze, berücksichtigten dabei aber auch den Entwurf für das „Picture Element„, dessen letzte W3C-Ausfertigung keine zwei Wochen alt ist. HTMLPictureElement ersetzt das img-Element durch Mediaquery-abhängige Bilder, die je nach Geräteauflösung in verschiedenen Größen geladen werden. Die Gamma Gallery macht die Bildgröße sogar abhängig von der Größe des Containers, in dem das Bild jeweils dargestellt wird.

Die Gamma Gallery vertäfelt Eure Website passgenau mit Bildern in der nötigen Auflösung. Quelle: Gamma Gallery

Angeordnet werden die Bilder bei der Gamma Gallery im Stil von David DeSandros Masonry-Plug-in, das ursprünglich entwickelt wurde, um die Float-Boxen von CSS zu bändigen. Weitere APIs und Plug-ins wie PageVisibility, url() und jQuery++ sorgen weiterhin für mehr Usability.

Zum Ausprobieren haben die Codrops eine Demo der Gamma Gallery online gestellt. Als Dokumentation müssen zunächst die Kommentare im Code und die Snippets aus der Ankündigung herhalten. Ein Lazy Loader wurde bereits bestellt.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -