1. Herzlich willkommen bei WPDE.org, dem grössten und ältesten deutschsprachigen Community-Forum rund um das Thema WordPress. Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können.
    Information ausblenden

Kacheln, die bei Klick verschwinden und Text zeigen

Dieses Thema im Forum "Plugins und Widgets" wurde erstellt von timoefeu, 16. Juli 2018.

  1. timoefeu

    timoefeu Member

    Registriert seit:
    27. Januar 2017
    Beiträge:
    15
    Zustimmungen:
    0
    Hallo liebe Community,

    ich bin gerade an einer WordPress Seite und möchte dort eine Unterseite mit den Leistungen einer Firma darstellen. Im Layout sind Kacheln (Bild mit Text darauf) vorgesehen, die bei Draufklicken verschwinden und den Text (Text und ein Dropdown) darunter anzeigen. Es gibt mehrere Kacheln, es soll aber immer nur eine gleichzeitig verschwunden sein. Bilder habe ich zur Erklärung angehängt.

    Über Ideen zur Umsetzung bin ich sehr dankbar!
     

    Anhänge:

  2. SirEctor

    SirEctor Well-Known Member
    Ehrenmitglied

    Registriert seit:
    28. Oktober 2008
    Beiträge:
    12.361
    Zustimmungen:
    427
    timoefeu gefällt das.
  3. timoefeu

    timoefeu Member

    Registriert seit:
    27. Januar 2017
    Beiträge:
    15
    Zustimmungen:
    0
    danke, das ist es quasi. "Nur" eben mit dem Bild und ohne Animation (kein Flip). Und on Click, nicht bei hover.
     
  4. SirEctor

    SirEctor Well-Known Member
    Ehrenmitglied

    Registriert seit:
    28. Oktober 2008
    Beiträge:
    12.361
    Zustimmungen:
    427
    Meinen zweiten Link hast du gesehen? Der ist schon mit Click. Und wenn du bei transition:transform 0s schreibst, hast du keine Animation.
     
  5. timoefeu

    timoefeu Member

    Registriert seit:
    27. Januar 2017
    Beiträge:
    15
    Zustimmungen:
    0
    danke der 2. Link sieht gut aus. Aber es funktioniert nur bei der ersten Kachel, alle anderen drehen sich nicht um. Idee?
     
  6. SirEctor

    SirEctor Well-Known Member
    Ehrenmitglied

    Registriert seit:
    28. Oktober 2008
    Beiträge:
    12.361
    Zustimmungen:
    427
    Dazu bräuchten wir einen Link zu deiner Seite.
     
  7. timoefeu

    timoefeu Member

    Registriert seit:
    27. Januar 2017
    Beiträge:
    15
    Zustimmungen:
    0
    im Grund ist es das gleiche wie hier, hab's nur um ein Zweites erweitert und auch den JS-Code dupliziert:
    https://codepen.io/moellerfeuer/pen/vawmde

    Es scheint so zu gehen.
    Aber bei 8 Kacheln bläht es den Code halt auf.

    Wäre schön, wenn man nur 1 gleichzeitig umdrehen könnte :)
     
    #7 timoefeu, 15. August 2018
    Zuletzt bearbeitet: 15. August 2018
  8. SirEctor

    SirEctor Well-Known Member
    Ehrenmitglied

    Registriert seit:
    28. Oktober 2008
    Beiträge:
    12.361
    Zustimmungen:
    427
  9. timoefeu

    timoefeu Member

    Registriert seit:
    27. Januar 2017
    Beiträge:
    15
    Zustimmungen:
    0
    Danke nochmals :)
    ..Ansich super, hab es hinbekommen. Aber im Safari funktioniert es nicht, da spiegelt sich die front nur :(
    Betrifft Desktop und mobile. Firefox/Chrome funktioniert.
     
  10. SirEctor

    SirEctor Well-Known Member
    Ehrenmitglied

    Registriert seit:
    28. Oktober 2008
    Beiträge:
    12.361
    Zustimmungen:
    427
    Gib uns mal einen Link. Ich selber nutze den Safari nicht. Aber evtl. kann hier jemand anderes helfen.
     
  11. SirEctor

    SirEctor Well-Known Member
    Ehrenmitglied

    Registriert seit:
    28. Oktober 2008
    Beiträge:
    12.361
    Zustimmungen:
    427
    Versuch mal bei .card__face noch zusätzlich -webkit-backface-visibility: hidden;
     
    timoefeu gefällt das.
  12. timoefeu

    timoefeu Member

    Registriert seit:
    27. Januar 2017
    Beiträge:
    15
    Zustimmungen:
    0
    Klappt. Vielen Dank.
     
  13. timoefeu

    timoefeu Member

    Registriert seit:
    27. Januar 2017
    Beiträge:
    15
    Zustimmungen:
    0
    Doch noch eine Sache:
    Damit es das card flip funktioniert, musste ich jquery einbinden ( https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js ).
    Leider funktionieren dann aber meine "Dropdown-Elemente" nicht mehr auf der selben Seite. Die Dropdowns stammen übrigens aus meinem WordPress-Theme und sind dort fertige Module.

    Kann ich das Ganze minimieren, so dass ich nicht diese jquery.min.js benötige?
     
  14. SirEctor

    SirEctor Well-Known Member
    Ehrenmitglied

    Registriert seit:
    28. Oktober 2008
    Beiträge:
    12.361
    Zustimmungen:
    427
    Gib uns einen Link zur Seite, dann könnten wir mal schauen was stört.
     
  15. timoefeu

    timoefeu Member

    Registriert seit:
    27. Januar 2017
    Beiträge:
    15
    Zustimmungen:
    0
  16. SirEctor

    SirEctor Well-Known Member
    Ehrenmitglied

    Registriert seit:
    28. Oktober 2008
    Beiträge:
    12.361
    Zustimmungen:
    427
    Du hast jquery 1.12.4 (Original WordPress) und 3.3.1 (Cloudflare). Wenn ich deine Version in codepen.io teste, läuft die auch mit 1.12.4. Du brauchst mMn die Version 3.3.1 nicht.
     
  17. timoefeu

    timoefeu Member

    Registriert seit:
    27. Januar 2017
    Beiträge:
    15
    Zustimmungen:
    0
    Ich habe die Einbindung der 3.3.1 auskommentiert und nun funktioniert das Dropdown wieder, aber eben das Card Flip nicht (Fenster kleiner ziehen, dann erscheinen die richtigen Cards).
     
  18. SirEctor

    SirEctor Well-Known Member
    Ehrenmitglied

    Registriert seit:
    28. Oktober 2008
    Beiträge:
    12.361
    Zustimmungen:
    427
    Versuch dein Script mal so in etwa einzubinden:
    PHP:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
     
    timoefeu gefällt das.
  19. timoefeu

    timoefeu Member

    Registriert seit:
    27. Januar 2017
    Beiträge:
    15
    Zustimmungen:
    0
    das war's, vielen Dank!
     
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden