Ordner aus Bilder erstellen mit HTML?

...komplette Frage anzeigen

3 Antworten

Es gibt diverse Wege, das zu lösen. Hängt davon ab, ob deine Galerie dynamisch sein soll oder nicht. Sprich, ob dein Code von alleine neue Bilder in einem Ordner erkennen und der Webseite hinzufügen soll.

Nehmen wir mal erst eine statische Variante:

Du erstellst einen Container für jedes Album, in dem die Bilder untereinander liegen. Das erreichst du mit css.
Beim Klick schiebst du ein Album nach vorne und lässt alle Bilder darin in einer Reihe anzeigen. Könntest du mit css lösen, könnte mit JacaScript aber angenehmer sein. Die Animation sind dabei einfach veränderte css-Werte.

Die dynamische Variante:

Hier bei brauchst du eine serverseitige Sprache, weil dein Client (da, wo deine html, css und manche JavaScript Dateien liegen) keinen direkten Zugriff auf gewisse Serverstrukturen haben (sollten), hängt natürlich von deinem Server ab. Ich würde dir allerdings NodeJs empfehlen. Hier ein Beispiel, wie du die Namen aller Dateien aus einem Ordner bekommst: http://stackoverflow.com/questions/2727167/how-do-you-get-a-list-of-the-names-of-all-files-present-in-a-directory-in-node-j

Diesen Output übermittelst du an deinen Client, wo du sie mit JavaScript entgegen nimmst. Mit js könntest du nun html-Elemente erzeugen, abhängig von der Outputlänge. Sprich acht Bilder im Ordner, sind auch acht erstellte Elemente. Diese Elemente ersetzen deine Bildelemente im html-DOM. Wichtig dabei ist, dass du keine harte Anzahl in den Loop schreibst, du möchtest es doch dynamisch haben. Speichere die empfangenen Bildnamen in einem Array ab und gebe beim Loop die Arraylänge mit nameDesArray.length an.

Das css brauchst du denn noch, um die Bilder im Container zu "verstecken". Beim Klick dann wieder das Übliche, wie bei der statischen Variante.

Wenn du Ordner anlegst auf deinem Server und die Bilders da rein sortierst ,

ist das relative einfach mit php jsp oder asp  einzulesen .

dann in ein DIV die bilders leicht verschoben übereinander platzieren mit

z-index


dann mussu nur noch ein jquery finden bzw erstellen das die bilders

von der mitte auf ihre gridposition zieht .

also mit etwas mathe und bissel fummelei sollte das machbar sein .


hier mal ein jquery beispiel

wie man so machen könnte , fehlt natürlich noch viel mathe , aber

zeigt dir den weg ws du brauchst .

http://pastebin.com/U6QqTPSs


Was möchtest Du wissen?