Gallery mit <ul>

[MMerz]

Hallo liebe Forumsmitglieder,

ich hoffe ihr könnt mir eventuell bei einer Gallery weiterhelfen. Ich habe unter http://demo.koken.me/ das Theme axis gefunden. Dort ist eine sehr schöne Gallery unter dem Reiter "Content" zu finden.

Ich würde sehr gerne eine ähnliche Bildergallery programmieren. Jedoch mit mehr Bilder in einer Reihe.

Was ich bisher rausgefunden habe, ist das die Gallery mit dem Tag <ul> programmiert wurde. Jedoch verstehe ich nicht ganz wie. Da die Hochkant Bilder um einiges mehr Height haben als die querformatbilder. Jedoch ist der Abstand zwischen den Bildern immer gleich groß. Habt ihr eine idee wie das programmiert wurde und mit CSS formatiert?

Wäre euch sehr dankbar, wenn ihr mir helfen könntet. Oder ideen habt wie das funktioniert.

Das Nachladen der Bilder ist kein Problem. Das wird über LAZY-LOAD gemacht ;)

Danke euch.

Grüße
Marcel

 

[threadi]

HTML-Elemente wie <ul> programmiert man nicht, HTML ist schließlich keine Programmiersprache.

Die Galerie basiert jedoch auf JavaScript, mit HTML alleine kannst Du nur die Struktur anlegen, nicht aber das Aussehen und auch nicht das Verhalten. Die Galerie in deinem Beispiel wurde mit einem fertigen JavaScript-Paket erstellt. Das könntest Du ebenfalls verwenden, oder eine andere JavaScript-Galerie nutzen - z.B. den Anythingslider. Bei dem ist das Aussehen nahezu egal und kann von dir bestimmt werden.

 

[MMerz]

Hey,

Danke für deine schnelle Antwort. Welches js-Paket wird dort verwendet? Und wo kann ich dieses bekommen?
Und muss ich es selber anpassen? Weil ich weis nicht wie das mit den verschiedenen Größen gehen soll.

Grüße

 

[threadi]

Welches das ist kannst Du im Quellcode der Seite sehen. Ich kenne es nicht, hab es nie benutzt und kann dir daher nicht sagen wie es anzuwenden ist. Schau dir die Implementierung dort an, such nach der Quelle für das Script und hoffe, dass es dort dazu eine Anleitung gibt.