Auf der Suche nach Galerie Templates

Hallo,

ich bin auf der Suche nach Galerie-Templates.

Natürlich habe ich Mr. Google schon gefragt. Die Vielzahl ist unüberschaubar. Ich suche etwas Bestimmtes und weiß nicht ganz, wie ich da fündig werde. Das Problem scheint mir nämlich das zu sein, dass man ganze Galerie-Website-Templates findet von zigtausend anbietern auch von CMS wie Wix und Wordpress. Sowas meine ich aber nicht.

Ich hätte gern nur die Galerie an sich, die ich in meine bestehende Seite einfügen kann.

Vorgestellt habe ich mir in etwa sowas wie auf dieser Seite. Das ist ein Bootstrap-Template. Das Original davon habe ich auch gefunden, das ist dieses hier. Das sieht im Galerie-Teil jedoch anderes aus. Und vor allem weiß ich nicht, welche Bootstrap-Dateien ich für diese Galerie brauche. Mit den Standard-CSS- und JS-Dateien von Bootstrap funktioniert es jedenfalls nicht.

Kennt hier jemand gute Galerien, die ähnlich aufgebaut sind und die vl nicht auf Bootstrap oder ähnliche Bibliotheken zugreifen?

Was stelle ich mir denn genau vor? Das Einfliegen von unten ist ja schön, aber nicht zwingend. Alle Bilder aneinander angepasst auf einer Seite. Bei Hover erscheint der Titel, das Bild wird heller. Und man sollte auch ein Bild anklicken können und dann durch die Galerie durchklicken können, wie das in dem Bootstrap-Template ist.

Ihr seid schon länger in diesem Bereich unterwegs. Vielleicht habt ihr ja ein paar Tipps oder Links zu Seiten, die einem wirklich nur die Galerie und nicht ein komplettes Webseiten-Template anbieten.

Vielen Dank!

Elly

Danke, du bist genial! Daraus lässt sich echt was machen!

Von diesen Dingen habe ich überhaupt noch nie was gehört. Und wie gesagt, wenn ich Portfolio oder Galerie google, finde ich hauptsächlich Templates für Komplett-Webseiten oder gar CMS.

Gibt's da noch wichtige Stichwörter auf dem Gebiet?

Ich werd am WE mal mit dem Code rumspielen. Wenn ich Hilfe brauch, meld ich mich auf jeden Fall.

Danke danke!

So...ich seh mir grad mal das mit der Galerie genauer an.

Ich versteh nicht ganz, warum man da mit Spalten arbeitet anstatt mit Reihen zB. Es ist ja dann beim Schreiben irgendwie umständlich, dass man die Bilder nicht einfach untereinander einfügen kann, sondern jedes neue Bild dann eins in Spalte eins, eins in Spalte zwei etc.

Was sich mir auch nicht erschließt - wenn ich nicht gleich viele Bilder in jeder Spalte hab, dann sind sie unterschiedlich breit.

Ich hab das mal mit einem Testbild gemacht und hochgeladen. Die .col hab ich übrigens umbenannt, sonst mischt mir Bootstrap wieder dazwischen.

Zitat von Sempervivum

Der Grund ist, dass ich von der Galerie in deinem Eingangsposting ausgegangen bin. Dort sind die Bilder in den Spalten unterschiedlich hoch und daher in der Höhe versetzt. Das würde nicht funktionieren, wenn man sie in Reihen anordnen würde. Und die Animation setzt voraus, dass bei übereinander liegenden Bilder der rechte und linke Rand in einer Linie ist, sonst würde es zu Überdeckungen kommen, wenn die Bilder von unten eingleiten.

Ah, das macht natürlich Sinn. Den letzten Satz verstehe ich jetzt allerdings nicht. Wenn der rechte und der linke Rand in einer Linie sein müssen, die Bilder aber unterschiedlich hoch sind - widerspricht sich das dann nicht?

flex:1 - Super, danke! Ich muss mich definitiv mehr in Grid- und Flex-Systeme einarbeiten!

Achso, diese. Verstehe. Alles klar!

So, next step. Das Bild-Hover für die Beschreibung.

Ich hab mir mal ein schönes Tutorial gesucht, das aber nur funktioniert, wenn die Bilder eine fixe Höhe haben. Das möchte ich ja nicht, weil ich ja Hoch- und Querformatbilder mischen können muss.

Diese rein CSS-basierte Lösung hab ich mir mal umfunktioniert und sie klappt im Grunde auch rein für die Beschreibung. Ich würde das blur dann mit jQuery lösen.

Es gibt sicher wieder mal zig Möglichkeiten. Könnt ihr für meinen Fall hier was anderes eher empfehlen?

In meinem Kopf habe ich sowas wie einen invisible Block, der über JS dann bei hover visible gemacht wird. Aber das geht ja sicher auch nur, wenn das Bild eine fixe Höhe hat. Wobei ja in dem Bootstrap-Beispiel von oben die Höhen auch unterschiedlich sind und das Hover ja farbig hinterlegt ist. Aber ich schätze, da steckt jede Menge JS-Code dahinter. Und ich will es ja lieber selber coden können als einfach irgendwas zu verwenden, das ich nie im Leben selbst geschrieben habe.

Eine andere Frage noch: Ich habe ja .gallery-col img - wenn ich das in .gallery-item img ändere, haben die Bilder ihre tatsächliche Breite und nicht die 100% von der Spalte. Eigentlich müsste das doch egal sein, denn img ist in item in col... Oder steuere ich damit wirklich, wovon das img seine 100% nimmt? Dann habe ich wieder was gelernt.

Achja und für die Responsability: Kann ich die Spalten irgendwie einfach untereinander anordnen bzw. nur 2 nebeneinander je nach Bildschirmgröße? Dann ist halt eine andere Bildreihenfolge drin. In dem Bootstrap-Beispiel bleibt die Reihenfolge erhalten, so als wären das davor keine Spalten gewesen.

Kann man das nicht ohne Spalten trotzdem einfliegen lassen? Wenn jedes Bild dieselbe Breite in Prozent hat, sind sie nebeneinander gleich breit. Die nächste Zeile sollte dann natürlich schön andocken und keine Linie bilden. Optisch so wie es jetzt auch ist, aber technisch so, dass die Reihenfolge beim Fenster verkleinern erhalten bleibt. Ich erwarte von euch keinen Code für sämtliche Bildschirmgrößen, ich mein nur das Grundgerüst.

Ah, da gibt's ja mehrere Antworten. Hab das Mail nur zum ersten bekommen.

Der Begriff Tooltip war mir neu. Hab mal ein bissl gegooglet und zB das da gefunden. Das ließe sich bei mir ws auch so umbauen, dass die Beschreibung auf dem Bild erscheint. Da wird mit visible/hidden gearbeitet.

Verstehe, bei Bootstrap steckt in den Templates wie vermutet sehr viel Code dahinter, der so nicht offensichtlich ist. Für den Anfang reicht mir erstmal was Einfaches, was ich auch selbst nachvollziehen bzw. schreiben kann.

Es muss ja gar nicht beim Verschieben der Browsergröße alles hin- und herfliegen. Beim Runterscrollen ja - sieht optisch schöner aus und es wird nicht gleich der ganze Content geladen (sollte dazu das Script nicht in den Header statt ans Ende des Body?) Und da war halt mein Gedanke, ob das nicht auch geht, wenn die Bilder nebeneinander angeordnet sind, eins nach dem anderen und sich trotzdem schön einpasst.

Und dass das dann auch responsive ist und sich auf 2 bzw. 1 Spalte reduziert bzw. dann unten anfügt. *grübel*

Zitat von Sempervivum

PS: Was das Bild-Hover betrifft, so hätte ich mir zuvor die Beispielseite ansehen sollen: Das ist ja gar kein Tooltip im üblichen Sinne, sondern die Beschreibung erscheint in der selben Größe wie das Bild. D. h. die Sachen, die die Positionierung betreffen, sind dort nicht relevant.

In derselben Größe nicht, nur beim Beispiel, nicht bei mir, da ich ja keine fixen Höhenangaben habe.

Was hältst du von meiner Idee, das mit der Bildbeschreibung so zu machen und blur zusätzlich über jQuery einzubauen?

Mr. Murphy, danke für deinen Beitrag. Ich hab mir das mal durch den Kopf gehen lassen und finde das ganz interessant hier. Ich hab nämlich den Eindruck, dass gerade die heutigen Webseiten viel dynamischer sind und damit meine ich nicht das responsive Verhalten, sondern wirklich dass mal hier, mal dort was einfliegt oder fixiert wird am Rand etc. Gerade das mit dem JS load, so dachte ich, wäre von Vorteil, weil dann nicht der ganze Content geladen werden muss und somit die Seite beim ersten Laden weniger Zeit braucht. Vielleicht habe ich ja falsch gedacht, das Script muss ja natürlich auch noch geladen werden.

Was den Hover betrifft, so ist das auf Touchgeräten tatsächlich nicht sehr userfriendly, wenn auch es trotzdem funktioniert. Optimal ist es wohl nicht. Ich will ja bei mir auch noch einen Link aufs Bild setzen und eine Fancybox machen.

Ihr werdet jetzt lachen, aber ich dachte, ich könnte für die Galerie die Bilder in DIVs geben, mit flex versehen und dann wird alles schön angeordnet, auch responsive. Das geht ja doch normalerweise auch?

Dieses Mansonry, dass Erik JO da gebastelt hat, ist natürlich Hammer. Bin ja gespannt, ob ich mit dem was anfangen kann. Sieht doch ziemlich komplex aus. Und der Bildtitel soll dann auch noch drauf. Und beim Anklicken die Fancybox 3, nicht so wie er das gemacht hat.

Oder das hier. Das wär's doch. Und die Animationen sind hier CSS-basiert.

Ich muss gestehen, zeilenbasiert sieht nix aus. Da haben die Hochformatbilder dann ein Problem.

Ich hab's gecheckt! Und das Wichtigste: Die vertikale Reihenfolge.

Wen das hier noch interessiert, Kulturbanause schreibt auch einen Artikel dazu.

Bin jetzt gespannt, ob ich das hinbekomme, das alles zu kombinieren, was ich da gerne hätte. Jetzt les ich mich erstmal ein...