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

  • Zitat

    Alle Bilder aneinander angepasst auf einer Seite.

    Das kannst Du mit diesem Layout erreichen:

    CSS
            #gallery-cont {
                display: flex;
            }
    
            .col img {
                width: 100%;
                vertical-align: top;
                transition: margin-top 1s ease 0s;
            }

    Allerdings wird dabei die Verteilung auf die Spalten nicht automatisch austariert, wenn die Bilder verschieden hoch sind. Dafür gibt es aber fertige Scripts, das Stichwort lautet "masonry".

    Zitat

    Das Einfliegen von unten ist ja schön, aber nicht zwingend.

    Dafür habe ich dieses Skript geschrieben:

    Zitat

    Und man sollte auch ein Bild anklicken können und dann durch die Galerie durchklicken können, wie das in dem Bootstrap-Template ist.

    Dafür findest Du unter dem Stichwort "lightbox" zahlreiche Skripts. Mein Favorit ist Fancybox 3, das ist einfach anzuwenden und unterstützt Touch-Bedienung:

    https://fancyapps.com/fancybox/3/

  • 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.

  • 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.

  • 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.

  • Ich nehme an, mit "Bild-Hover" meinst Du einen Tooltip? Davon kann man eine Basisversion problemlos nur mit CSS realisieren. Dann kann es jedoch passieren, dass der Tooltip, wenn das Bild sich gerade in einer Ecke des Browserfenster befindet, teilweise nicht sichtbar ist. Um das Problem zu lösen, muss man die Position des Tooltip intelligent abhängig von der Position des Bildes fest legen. Z. B. wenn das Bild sich links oben befindet, den Tooltip rechts unten platzieren.

    Hierbei muss man das Rad nicht selbst erfinden, sondern es gibt fertige Bibliotheken, die das erledigen, z. B. Tooltipster oder popper.js, das häufig zusmmen mit Bootstrap verwendet wird.

  • Zitat

    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.

    Im HTML-Inspektor erkenne ich in der mittleren Spalte ein Bild, das kein .gallery-item hat:

    Code
                    <div class="gallery-col">
                        <img src="images/foto/testbild.jpg" style="transform: translateY(0px);">
                        <div class="gallery-item">
                            <img src="images/foto/testbild2.jpg" style="transform: translateY(200px);">
                            <div class="gallery-item-hover">
                                <h2>Testbild</h2>
                            </div>
                        </div>
                    </div>

    Daher wirkt das .gallery-item img wo die Breite auf 100% fest gelegt wird, nicht auf dieses Bild.

  • Zitat

    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.

    In dem Bootstrap-Beispiel ist man ganz anders vorgegangen: Dort gibt es gar keine Spalten sondern die Bilder sind absolut positioniert und ihre Position wird abhängig vom gewünschten Layout durch Javascript fest gelegt. Das macht das Skript komplizierter aber ermöglicht es, dass beim Übergang von z. B. drei auf zwei Spalten die Bilder animiert an die neue Position fliegen.

  • 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.

  • 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*

  • 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?

  • Mal ein paar Gedanken zu Image-Gallerien:


    Deutlich über die Hälfte, wahrscheinlich fast schon 2/3, aller Endgeräte werden über einen Touchscreen gesteuert. Die kennen aber keine hover-Effekte.


    Heißt: Die haben keine Chance an die hover-Informationen zu kommen.


    hover-Effekte können zwar nachgebildet werden. Entweder wird die Information angezeigt, solange der Screen berührt wird. Dann sind aber Finger und Hand über der Information. Oder sie erscheinen mit einem ersten Antippen und verschwinden mit einem zweiten Antippen. Die Informationen arten dann in eine Antipp-Orgie aus, die kein Besucher lange mitmacht. Du selbst wahrscheinlich auch nicht.


    In deinem ersten Beispiel in dem Eröffnungsbeitrag haben die Bilder zudem hover- und Klick-Effekte (Informtionen aufrufen und Bild aufrufen). Hast du das mal mit einem Touchscreen-Gerät ausprobiert?


    Es mag dir zwar vielleicht langweiliger erscheinen, aber die Informationen zu den Bildern sollten direkt angezeigt werden. Das ist benutzerfreundlicher.


    Das Einschweben der Bilder mag im ersten Moment schön wirken. Beim Scrollen nervt es aber eher, da es dem Besucher viel Zeit klaut. Nennt sich Zeitdiebstahl und gehört zu den "Extras", die Besucher nerven. Erst recht bei eher langsamen Verbindungen, also bei Smarphones und Tablets.


    Wie geschrieben: Ruf solche "schicken" Seiten mal mit einem Smartphone und / oder Tablet auf. Und noch sinnvoller: Bitte Andere das zu tun und ihre Meinung dazu kundzutun.


    Die Zeiten von Bewegungen auf Webseiten sind seit 20 Jahren vorbei. Sowas lenkt nur ab. Vor über 20 Jahren war das Internet noch neu und eine Spielwiese, da war alles interessant. Sowas nervt die meisten Besucher nur noch. Die wollen schnell und problemlos an die angebotenen Informationen. Und dabei nur rauf-/runter-scrollen müssen.


    Entsprechend wirst du auf erfolgreichen, professionellen Seiten kaum Bewegung finden. Wenn, dann meist Werbung, die niemand braucht und die gedanklich gleich mal als unwichtig eingestuft wird.

  • 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.

  • Zitat

    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?

    Selbstverständlich geht das auch, entweder mit Flex oder mit Grid. Vor allem wenn die Bilder alle das selbe Format bzw. Seitenverhältnis haben. Trifft das nicht zu, wird es ein wenig schwieriger, an dem Punkt waren wir ja schon Mal. Dafür sind dann diese Masonry-Skripts entwickelt worden, um auch in dem Fall die Bilder lückenlos in den Raum einzupassen.

  • 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...

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!