HTML Responsive Gallery mit Filtering

SebastianBW · 26. Mai 2018

Guten Morgen

Ich habe eine Bootstrap 4 Webseite gebaut und suche seit heute Morgen nach einer passenden Gallery, leider ohne Erfolg bisher, vielleicht könnt ihr mir ja weiterhelfen.

Was soll die Gallery können?
- Responsive (ich verwende Bootstrap 4)
- Filterfunktion/Kategorien
- Wenn man auf ein kleines Bild drückt, soll es vergrößert werden (klingt banal, aber an der Funktion scheitern die meisten Filtergalerien)
- Wenn man nach einer Kategorie gefiltert hat und ein Bild vergrößert, soll man auf einen Pfeil klicken können und das nächste Bild der gefilterten Kategorie erscheint
- Technik: HTML, CSS, JS, eigentlich relativ egal =)
- Kostenlos

- Optional: Wenn man filtert wäre ein netter Effekt natürlich schön, aber muss nicht sein.
- Optional: Ganz toll wäre natürlich, wenn man keine Thumbnails für die Vorschaubilder braucht, aber ich glaube das benötigt man wegen Ladezeit und so immer

Ich werde weitersuchen und hoffe, dass noch die passende gefunden wird :-)

Viele Grüße
Basti

RangnaR · 26. Mai 2018

Wahrscheinlich ein Overkill und nicht was du suchst. Aber wenn es etwas mehr sein darf:

Piwigo.org

NPC · 26. Mai 2018

Hi, nur zur Info: Bootstrap ist ein CSS-Framework; für tatsächliche Funktionalität benötigst du zusätzlich JS.

Gallery mit Filter + Animation:
- https://www.w3schools.com/howto/howto_js_portfolio_filter.asp
- https://codepen.io/pramodkumarboda/pen/XdgxmQ

> "Wenn man auf ein kleines Bild drückt, soll es vergrößert werden"
Das könnte man z. B. mit Bootstrap Modals machen:
- https://www.w3schools.com/howto/howto_css_modal_images.asp

> "(...) auf einen Pfeil klicken können und das nächste Bild der gefilterten Kategorie erscheint"
- https://www.bootply.com/71H5HWFEWP

> "Optional: Ganz toll wäre natürlich, wenn man keine Thumbnails für die Vorschaubilder braucht (...)"
Ja ganz toll, wenn ich mit dem Smartphone unterwegs eine Webseite öffne und 50 Bilder á 3MB geladen werden

SebastianBW · 26. Mai 2018

Ja, Piwigo bietet zwar sehr viel, aber ist doch etwas drüber raus glaub ich

@NPC
Selbst zusammen stückeln hab ich mir auch überlegt, weil ich bisher bootstrap Lightbox genutzt hab und das sehr toll fand, aber da gibts nur ein Problem: Wenn ich filtere und dann mit dem Pfeil das nächste angucken will, dann kommt ja vermutlich das nächste Bild der gesamten Gallery und nicht das nächste Bild der aktuellen Kategorie.

mastaqz · 26. Mai 2018

@NPC
Selbst zusammen stückeln hab ich mir auch überlegt, weil ich bisher bootstrap Lightbox genutzt hab und das sehr toll fand, aber da gibts nur ein Problem: Wenn ich filtere und dann mit dem Pfeil das nächste angucken will, dann kommt ja vermutlich das nächste Bild der gesamten Gallery und nicht das nächste Bild der aktuellen Kategorie.

Falls du JavaScript kannst:

1. Jedem Bild eine Klasse geben entsprechend dem Filter.
2. Einen Array mit allen Bildern erstellen.
3. Je nach angeklicktem Filter mit `myArray.filter` einen Array mit den gewollten Bildern erstellen.
4. Die Elemente des Arrays haben nun jeglichen Inhalt wie src, outerHTML, innerHTML etc.

HTML:

<body>
  <div class="gallery">
    <img class="car" src="#" alt="" />
    <img class="car" src="#" alt="" />
    <img class="fruit" src="#" alt="" />
    <img class="fruit" src="#" alt="" />
    <img class="pet" src="#" alt="" />
    <img class="pet" src="#" alt="" />
  </div>
</body>

<script>
  // alle Bilder aus der Gallery als Array speichern
  const allImages = [...document.querySelectorAll(".gallery > img")];
  // filtern nach gewünschtem Tag
  const cars = allImages.filter(image => image.classList.contains("car"))
</script>

SebastianBW · 26. Mai 2018

Danke, ich werd mich dann mal an einer eigenen Lösung mit Hilfe eurer Einzelframeworks machen

Suche

HTML Responsive Gallery mit Filtering

SebastianBW

Gast

RangnaR

Gast

NPC

Ensign

SebastianBW

Gast

mastaqz

Lt. Junior Grade

SebastianBW

Gast