Ich suche ein Responsives vertikales Akkordeon für Bilder

    Hallo,


    Ich habe in einer App (die sonst völliger shit ist) ein vertikales Akkordeon gefunden in dem beim Mouse over die Bilder in den einzelnen Stufen aufgehen. Weis hier jemand wie das mit HTML und CSS gemacht werden kann ... ich finde nur horizontale Akkordeons die das machen, zum Beispiel hier:https://www.mobirise-tutorials…-Tutorials/Akkordeon.html Ich will das was da horizontal passiert, nur mit Bildern (kein Text dazwischen) in Vertikal .... Am liebsten sogar so, dass man die Dateinamen gar nicht erst in ein HTML reinschreiben muss, sondern, dass die Namen dann vom Srver aus eingelesen werden.

    Da könte man dann beliebig viele Bilder auf den Server laden und die werden dann automatisch in dem Akkordeon angezeigt.

    Das ist garantiert möglich, aber ich kann JS und PHB noch nicht gut genug um das hinzubringen.


    Hat hier irgendjemand eine Idee wo ich die Bausteine dazu finde und ausprobieren kann?


    Danke
    brainstuff

    Zitat

    Am liebsten sogar so, dass man die Dateinamen gar nicht erst in ein HTML reinschreiben muss, sondern, dass die Namen dann vom Srver aus eingelesen werden.

    Das geht recht einfach mit der PHP-Funktion glob:

    Sempervivum,

    Damit hast Du mir sehr weitergeholfen. Ich bin aber dabei auf ein Problem gestossen, womit ich einfach nicht weiter komme. Das Template was ich da eigentlich nehmen will, läuft zwar auf der code-pen Seite perfekt, wenn ich aber den Code in ein html File und in ein CSS File kopiere, kommt nur Das Bild von dem Accordeon. Ich habe auch versucht ob es geht, wenn ich das CSS File in SCSS umbenenne. Kannst Du mal bitte nachschauen, was da falsch ist:



    -------
    CSS:
    _____


    Das geht auch nicht, wenn das flex noch "row" ist In firefox läuft das alles auf der code-pen Seite wo ich es gefunden habe ohne probleme. Aber wenn ich das lokal ausprobiere oder auf einen Server kopiere, geht nichts ... hier hast Du das Resultat auf einer Test Seite: http://pxoxd.net/eu wenn Du dabei das eu weglässt, kommst Du auf eine andere Test Seite wo eine andere Test Seite ganz normal läuft.


    Danke für Deine Hilfe.

    brainstuff

    Einmal editiert, zuletzt von Stef () aus folgendem Grund: Mod: Code Tags hinzugefügt

    Mit SCSS bist Du schon auf der richtigen Spur aber es nützt nichts, die Endung einfach zu ändern, weil dieses CSS vorkompiliert werden muss. Betroffen ist nur dieses:

    Code
    &:hover{
    flex: 7;
}

    Ändere es in dieses um und die Animation wird funktionieren:

    Code
    .item:hover {
    flex: 7;
}

    Und für die Zukunft, falls Du wieder mal etwas mit SCSS findest: Du kannst dir bei Codepen die kompilierte Version anzeigen lassen, indem Du oben rechts über dem CSS-Fenster auf den Pfeil klickst und "View Compiled CSS" auswählst.


    Und ebenfalls für die Zukunft: Code besser formatiert posten, das Symbol </> rechts oben beim Verfassen eines Beitrages.

    Sempervivum,


    Danke für diese Hilfe. Das läuft jetzt. Es hat aber nicht genügt, das so zu ändern, wie Du es gesagt hast, sondern ich musste den ganzen Code, der im compilierten SCSS steht, als CSS abspeichern... jetzt geht es.

    Auf dem codepen ist das gar kein compilierter Code, sondern anscheinend eine Code Version, die man dann compilieren muss.


    Ich habe das mit dem scss compilieren noch nicht so richtig verstanden ...., wenn man ein Programm compiliert dann steht in der compilierten Version nur noch völlig unleserliches Zeug. Auf der scss Version von codepen ist das aber ganz normaler (lesbarer) Code, in dem es ein paar Anpassungen hat.


    Und da dieser Code dann als ganz normales css laufen kann und funktioniert, verstehe ich nicht warum im codepen, das CSS, in einer nicht lauffähigen Version gelistet wird. Das führt nur dazu, dass Deppen, wie ich, den armen Sempervivum belästigen, damit er sich nicht langweilt.


    Ich verspreche Dir, dass ich mich in naher Zeit endlich einmal mit scss befasse und lerne das Zeug zu compilieren obwohl ich da nicht ganz begreife, was das bringen soll.... außer, dass es wahrscheinlich schwieriger ist einen compilierten Code abzuändern.


    Danke,

    brainstuff

    Zitat

    Ich verspreche Dir, dass ich mich in naher Zeit endlich einmal mit scss befasse und lerne das Zeug zu compilieren obwohl ich da nicht ganz begreife, was das bringen soll

    .... außer, dass es wahrscheinlich schwieriger ist einen compilierten Code abzuändern

    Es gibt sicher lohnendere Lernobjekte als SCSS. Der Nutzen besteht weniger darin, den Code gegen Manipulationen zu schützen sondern es soll Features zur Verfügung stellen, die CSS nicht bietet, z. B. Schleifen. Ich habe da vor längerer Zeit mal hinein gerochen und fest gestellt, dass diese Features dann doch wieder eingeschränkt sind, so dass ich zu dem Schluss gekommen bin, dass der Nutzen begrenzt ist und bin dann nicht tiefer eingestiegen.

    Zitat von Sempervivum

    Es gibt sicher lohnendere Lernobjekte als SCSS. Der Nutzen besteht weniger darin, den Code gegen Manipulationen zu schützen sondern es soll Features zur Verfügung stellen, die CSS nicht bietet, z. B. Schleifen. Ich habe da vor längerer Zeit mal hinein gerochen und fest gestellt, dass diese Features dann doch wieder eingeschränkt sind, so dass ich zu dem Schluss gekommen bin, dass der Nutzen begrenzt ist und bin dann nicht tiefer eingestiegen.


    Ja, das mit den Schleifen könnte vielleicht interessant sein ... aber auch dafür ist das alles wahrscheinlich viel zu umständlich.

    Deinen Tipp mit dem PHP werde ich auch umsetzen aber erst in ein paar Wochen. Vorläufig mache ich das mit einer ziemlichen Bastler Idee: ich kopiere einfach alle Bilder die angezeigt werden sollen, in ein Verzeichnis. Dann gebe ich denen, mit dem Umbenenn-Tool vom Totalcommander fortlaufende Zahlen als Namen ... img01.jpg .... imgxx.jpg in ein Unterverzeichnis "Images" und dann passe ich die folgenden Linien vom CSS an und das für item-1 bis item-xx

    "

    Code
    .item-1 {
background-image: url('https://images.unsplash.com/photo-1503602642458-232111445657?auto=format&fit=crop&w=1234&q=80');
}

    Aber da habe ich noch ein Problem ich verstehe diesen Dateinamen nicht so richtig.... mir fehlt da drin die Datei Endung und ich sehe auch nicht was das ? vor auto bedeutet ... steht das für automatische Dateiendung? Dann müssten meine "Items" so aussehen:


    Code
    background-image: url('https://xxxxx.com/Sub1/sub2/img01?auto=format&fit=crop&w=1234&q=80');

    ist das richtig?


    Danke

    brainstuff

    Sempervivum,


    Doch ich habe schon oft ? in einer URL gesehen aber das habe ich immer als Platzhalter verstanden, wie das im File System genutzt wird aaa?aaa steht dann für aaa1aaa und aaa2aaa und so weiter.

    Aber bei Internetadressen habe ich mir das nie so genau angesehen. Dies auch, weil ich es oft mich Sicherheitsfragen im Internet zu tun habe, wo manche Sachen, die eigentlich sehr klug sind, zu Idioten-Problemen führen.... wie zum Beispiel die Möglichkeit, dass man die Leute mit zwei Dateiendungen (xxx.pdf.exe) massiv täuschen kann oder dass man eine peinliche gefährliche URL hinter einer Schein URL verstecken kann (wenn man auf quellwasser.com klickt landet man dann bei misthaufen,de).

    Zu meinem Akkordeon Projekt habe ich noch eine Frage: kannst Du Dir ein 2-dimensionales Akkordeon vorstellen? Darunter verstehe ich folgendes:


    ! 1 ! 2 ! 3 ! 4 ! 555555 !
    ! 1 ! 2 ! 3 ! 4 ! 555555 !
    ! 1 ! 2 ! 3 ! 4 ! 555555 !

    ! 1 ! 2 ! 3 ! 4 ! 555555 !


    Will heißen, dass man da sowohl die Spalten, wie auch die Linien bei mouse over aufgedeckt bekommt:


    ! 1 ! 2 ! 3 ! 4 ! 555555 !

    ! 1 ! 2 ! 3 ! 4 ! 555555 !

    ! 1 ! 222222 ! 3 ! 4 ! 5 !
    ! 1 ! 222222 ! 3 ! 4 ! 5 !
    ! 1 ! 222222 ! 3 ! 4 ! 5 !

    ! 1 ! 2 ! 3 ! 4 ! 555555 !


    Da könnte man dann zum Beispiel Timelines rein tun:


    ! 2001 ! xxxxxxxxx !
    ! """"""!
    ! """"""! &&& !
    ! 2004 ! xxxxxxxxx !

    ! 2005 ! xxxxxxxxx !


    Wenn man da eine Zelle berührt öffnet sich die und zeigt ihren Inhalt (Bild, Text,..)


    Ich bin da auf einem Projekt, wofür das sehr interessant wäre: Es geht dabei um eine Tabelle, in der neben einem Datum, Bilder und Texte gelistet werden. Konkret sind das Bilder und Dokumente die Ereignisse aufzeigen, die ein Familienunternehmen in ca 50 Jahren geprägt und beeinflusst haben.


    Danke

    brainstuff

    Das dürfte kein Problem sein, wenn Du die Container verschachtelst: Im äußeren Container flex-direction: column; Jedes der Flex-Items darin ist wiederum ein Flex-Container mit flex-direction: row; und enthält die Elemente des betr. Jahres. Wobei flex-direction: row; Default ist und auch weg gelassen werden kann.

    Zitat von brainstuff

    Das führt nur dazu, dass Deppen, wie ich, den armen Sempervivum belästigen, damit er sich nicht langweilt.


    Ich verspreche Dir, dass ich mich in naher Zeit endlich einmal mit scss befasse und lerne das Zeug zu compilieren obwohl ich da nicht ganz begreife, was das bringen soll.... außer, dass es wahrscheinlich schwieriger ist einen compilierten Code abzuändern.

    Haha, das hast du toll geschrieben. Zu diesen Deppen gehör ich auch dazu, aber nach ein bisschen Pause bin ich auch wieder zurück. ;)

    Hab mir mal den Thread durchgelesen, vl kann ich zum Thema SCSS was Vernünftiges beitragen.

    Man findet ja viele Tutorials, wie man das richtig kompiliert und watchen kann etc. Tut auch alles seinen Job, nur meistens muss man da selbst Hand anlegen. Ich hab herausgefunden, dass das mit Visual Studio Code und einer entsprechenden Erweiterung doch wie am Schnürchen läuft - praktisch von selbst. Watchen kann man dort auch einstellen. Dh ändern musst du dan nur deine SCSS-Datei und sie wird immer automatisch in CSS kompiliert.

Jetzt mitmachen!

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

Benutzerkonto erstellen Anmelden