Nachdem wir nun bei zwei Kundenprojekten schon über „Grid Gallery“ (auch als Pinterest Gallery bekannt) gestoßen sind aber es wenig Infos dazu gibt, hier mal eine kleine Zusammenfassung.
Links ein Screenshot von http://www.silktricky.com
Grid Galleries gibt es auch unter Bezeichnungen wie „Smart Grid Gallery“ „Dynamic Grid Gallery“. Bei diesen Begriffen scheinen die Definitionen aber noch schwammig zu sein… Es wird teilweise damit beschrieben, dass diese responsive sind oder bei Klick sich etwas „dynamisch“ verändert.
Was sind Grid Galleries?
Die Grid Gallery kennen vielen bereits von Pinterest und auch teilweise aus dem Bereich Flat Design. Es handelt sich dabei um Kacheln/Grids die mit Bilder oder besonders cool mit Videos hinterlegt sind. Die meisten Grid Gallieres sind dazu responsive was dem ganzen nochmal einen schönen Touch gibt.
Im Normalfall sind die Galleries auch nicht statisch. Also bedeutet wenn man ein Bild anklickt öffnet sich nicht nur eine Lightbox. Bei den meisten wechseln die Kacheln bei einem Klick die Positionen. Das angeklickte Bild wird größer, wandert nach oben links oder ähnliches.
Ein weiterer Eigenschaft ist, dass es keine gleich großen Kacheln sind. Jede Kachel hat eine relative Größe zu dem hinterlegten Bildmaterial.
Ein Foto was ein hochformatiges Format hat kann so z.B. gut über 2-3 rechteckige Bilder/Videos gehen. Das gibt dem ganzen einen schönes „Chaoes“. Es hat etwas von Kopfsteinpflaster wo alle Steine perfekt einsortiert wurden, aber alle leicht unterschiedliche größen haben.
Was bringen Grid Galleries?
Die Wirkung ist, dass dieses Gallerien ein gewisses „Chaoes“ in die Website bringen und diese so schön auflockern. Gleichzeitig beschränkt sich das Durcheinander nur auf die Gallerie selbst und alles drum herum ist normal und geordnet. Eine tolle Form um Bildmaterial zu zeigen.
Für welche CMS/Shops gibt es Grid Galleries?
Aktuell sieht es leider noch etwas mau aus. Es gibt zwar einige, aber diese beschränken sich zum Großteil noch auf WordPress.
Für WordPress:
Smart Grid Gallery – Responsive WP Gallery Plugin
http://codecanyon.net/item/smart-grid-gallery-responsive-wp-gallery-plugin/8365014
Dynamic Grid: Photo Gallery for WordPress
http://codecanyon.net/item/dynamic-grid-photo-gallery-for-wordpress/2672081
Für Typo3
YAG TYPO3 Gallery – Theme Isotope (jQuery)
http://yag-gallery.de/examples/themes/isotope-jquery/
Für Magento
Für Magento gibt es scheinbar noch keine fertigen Extensions. Daher muss man sich entsprechend eigene Templates schreiben und kann für diese z.B. folgende Grid Gallerie verwenden.
http://www.jqueryrain.com/2014/06/build-dynamic-grid-salvattore-bootstrap/
Hier die Demo:
http://www.jqueryrain.com/demo/jquery-grid-plugin/
Weitere Grid Gallerien:
Hier ein Link der noch etliche weitere listet:
http://www.jqueryrain.com/demo/jquery-grid-plugin/
Mehr Infos von KonVis.de zu Webdesign und Magento